Не удается получить доступ к свойству существующего сервиса в компоненте - PullRequest
Новая
       26

Не удается получить доступ к свойству существующего сервиса в компоненте

0 голосов
/ 05 декабря 2018

Я создал простой сервис, который сначала загружает конфигурацию из файла 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                               // ??

Почему я не могу получить доступ к свойствам объекта?Мне кажется, что все хорошо и доступно ....

1 Ответ

0 голосов
/ 05 декабря 2018

В вашем случае =>

app-load.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/

...