[英]Can't access property of existing service in component
我創建了一個簡單的服務服務,該服務首先從JSON文件加載配置。 因為我希望啟動應用程序時數據可用,所以我正在使用APP_INITIALIZER加載數據。
在服務本身中,數據可用,一切都很好。 但是,當我從組件內部使用服務時,它會產生奇怪的行為。 請有人可以解釋我的代碼有什么問題嗎?
filterService.ts
export class FilterService {
url:string = '/admin2/src/assets/import.filter.json';
filters: Filter[];
currentFilter: Filter;
public loadFilters() {
this.http.get(this.url).subscribe(response => {
this.filters = <Filter[]>response;
if (this.filters[0])
this.currentFilter = this.filters[0];
});
}
此服務在應用初始化期間加載
app.module.ts
@NgModule({
...
providers: [
FilterService,
{ provide: APP_INITIALIZER, useFactory: (filterService: FilterService) => () => filterService.loadFilters(), deps: [FilterService], multi: true },
],
...
最后,在我的組件中,我正在做:
filter.component.ts
constructor(private filterService: FilterService) {}
ngOnInit() {
console.log('import initialized');
console.log(this.filterService);
console.log(this.filterService.currentFilter);
console.log(this.filterService.filters);
console.log(this.filterService.getFilters());
}
現在我真的不明白console.log中發生了什么
Object { http: {…}, url: "http://...} // as expected
undefined // ??
undefined // ??
undefined // ??
為什么不能訪問對象屬性? 在我看來,一切都很好並且可用。
在您的情況下=>
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { FilterService } from './filter.service';
export function load_filters(filterService: FilterService) {
return () => filterService.loadFilters();
}
export function get_filters(filterService: FilterService) {
return () => filterService.getFilters();
}
@NgModule({
imports: [HttpClientModule],
providers: [
AppLoadService,
{ provide: APP_INITIALIZER, useFactory: load_filters, deps: [FilterService], multi: true },
{ provide: APP_INITIALIZER, useFactory: get_filters, deps: [FilterService], multi: true }
]
})
export class AppLoadModule { }
import { AppLoadModule } from './app-load/app-load.module';
@NgModule({
imports: [AppLoadModule]
})
我已關注此博客以創建我的APP_INITIALIZER =>請閱讀一次(可能有用) https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.