该问题可能出现在使用 APP_INITIALIZER 时,由于异步加载数据的原因,导致该方法无法正确地监测到数据变化,从而报错。解决方法是在 APP_INITIALIZER 中使用 Promise 将数据加载过程转换为同步方式,确保数据已经加载完毕后再执行相应操作。代码示例如下:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
public data: any;
constructor(private http: HttpClient) {}
loadData() {
return this.http.get('url')
.toPromise()
.then(data => {
this.data = data;
});
}
}
export function dataInitializer(dataService: DataService) {
return () => dataService.loadData();
}
在 AppModule 中配置:
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { DataService, dataInitializer } from './data.service';
@NgModule({
imports: [
HttpClientModule
],
providers: [
DataService,
{
provide: APP_INITIALIZER,
useFactory: dataInitializer,
deps: [DataService],
multi: true
}
]
})
export class AppModule {}
在组件中使用:
export class ExampleComponent implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.loadData().then(() => {
console.log(this.dataService.data);
});
}
}