angular - 无法访问组件中现有服务的属性
问题描述
我创建了一个服务简单服务,它首先从 JSON 文件加载配置。因为我希望应用程序启动时数据可用,所以我使用 APP_INITIALIZER 加载数据。
在服务本身中,数据可用,一切都很好。但是当我从组件内部使用该服务时,它会出现奇怪的行为。请问有人可以解释我的代码有什么问题吗?
过滤器服务.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 },
],
...
最后,在我的组件中,我正在做:
过滤器组件.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 // ??
为什么我无法访问对象属性?在我看来,一切都很好并且可用....
解决方案
在你的情况下=>
应用程序加载.module.ts
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 { }
app.module.ts
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/
推荐阅读
- python - 如何使用python检查最新的git分支?
- javascript - Javascript 意外行为 2 问题(数学错误且未显示简单结果)
- angular - Angular 生命周期:- 向 angular-material-calendar 添加了额外的行,我总是需要显示
- javascript - TensorFlow.js 如何训练输出=输入+1
- visual-studio - 并排配置不正确
- bash - Bash:同名的局部变量
- hibernate - Google Cloud Sql 连接关闭问题
- c# - 如何在我的单元测试中添加类,引用不授予访问权限
- python - 使用 beautifulSoup 从 HTML 片段中的类中获取 href 的所有值
- angular-routing - Angular 8 路由无法正确导航