在Angular中,可以使用服务(Service)来从服务器获取设置,并在模块的组件运行之前使用这些设置。以下是一个解决方法的示例:
SettingsService
的服务:import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class SettingsService {
settings: any;
constructor(private http: HttpClient) { }
loadSettings() {
return this.http.get('url/to/settings').toPromise().then(data => {
this.settings = data;
});
}
}
SettingsService
:import { Component, OnInit } from '@angular/core';
import { SettingsService } from 'path/to/settings.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private settingsService: SettingsService) { }
ngOnInit() {
this.settingsService.loadSettings().then(() => {
// 在这里使用从服务器获取的设置
console.log(this.settingsService.settings);
});
}
}
SettingsService
:import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { SettingsService } from 'path/to/settings.service';
import { MyComponent } from './my-component.component';
@NgModule({
declarations: [MyComponent],
imports: [HttpClientModule],
providers: [SettingsService]
})
export class MyModule { }
通过这种方式,SettingsService
将在模块加载时自动初始化,并在其它组件中使用。在ngOnInit
生命周期钩子中调用loadSettings
方法,确保在组件运行之前从服务器获取了设置。
上一篇:Angular: 需要属性绑定