获取Angular组件中的数据(配置文件页面)

// example.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

// example.component.ts
import { Component, OnInit } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(private exampleService: ExampleService) {}

  ngOnInit() {
    this.exampleService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

// config.json
{
  "apiUrl": "https://api.example.com"
}

// config.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  config: any;

  constructor(private http: HttpClient) {
    this.loadConfig();
  }

  loadConfig() {
    if (environment.production) {
      this.http.get('/assets/config.json').subscribe((data: any) => {
        this.config = data;
      });
    } else {
      this.config = environment.config;
    }
  }

  get apiUrl(): string {
    return this.config.apiUrl;
  }
}