Angular 6 http + Observable + Тема для нескольких компонентов - PullRequest
Новая
       23

Angular 6 http + Observable + Тема для нескольких компонентов

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

Я пытаюсь поделиться данными, которые мои поставщики услуг получают через HTTP GET.Я получаю данные в моем http.service: 

@Injectable()
export class HttpService {

  constructor(private http: HttpClient) { }

  public getData4(url: string): Observable<Premium[]> {
    return this.http.get<Premium[]>(url);
  }
}

Маршрутизация приложения: 

<TabsComponent>
  <TablesComponent> 
  <TablesComponent/>
</TabsComponent>

В tabs.component.ts у меня есть: 

 export class TabsComponent implements OnInit {

  myUrl4All = 'http://localhost:8083/RCCT-2.0-SNAPSHOT/rest/v2';
  premiumsO: Premium[] = [];

  constructor(private httpService: HttpService, private entity1Service: Entity1Service) { }

  ngOnInit() {
    this.httpService.getData4(this.myUrl4All).subscribe(data => this.premiumsO = 
    data['premiumList']);
  }
}

В моем tabs.component.html у меня есть: 

<div>
<app-tables-component></app-tables-component>
</div>

И мои таблицы.component.ts: 

export class TablesComponent implements OnInit  {

  constructor() { }

  returnedArray: Premium[] = [];

  ngOnInit(): void {

    this.returnedArray = ?????????
  }

}

И мой вопрос: сейчасУ меня есть один http.service с наблюдаемой, но я хочу поймать и отобразить данные из http в моем tables.component с помощью подписки.Как мне изменить свой код, чтобы сделать это?

1 Ответ

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

Один простой и быстрый способ для вас - пользователь @Input (не забудьте импортировать его из @angular/core) в ваш дочерний компонент, например: 

export class TablesComponent implements OnInit  {

  constructor() { }

  @Input()
  returnedArray: Premium[] = [];

  ngOnInit(): void { }
}

, а затем в родительском template.htmlпередать данные о родителях следующим образом: 

<div>
    <app-tables-component [returnedArray]="premiumsO"></app-tables-component>
</div>

РЕДАКТИРОВАТЬ: Согласно комментариям ниже

Добавьте свой Array в свой сервис, сделайте его заметным и подпишитесь на него.Например: 

@Injectable()
export class HttpService {
  premiumsO: BehaviorSubject<Premium[]> = new BehaviorSubject<Premium[]>();

  constructor(private http: HttpClient) { }

  public getData4(url: string): void {
    this.http.get<Premium[]>(url).subscribe(data => {
        this.premiumsO.next(data['premiumList']);
    });
  }
}

А затем в контроллерах вашего родителя и потомка подпишитесь на premiumsO, например: 

export class TablesComponent implements OnInit  {

  constructor(private httpService: HttpService) { }
  private subscription: Subscription;
  returnedArray: Premium[] = [];

  ngOnInit(): void {
       this.subscription = this.httpService.premiumsO.subscribe(data => this.returnedArray =  data);
  }
    ngOnDestroy() {
        this.subscription.unsubscribe().        
    }
}

Сделайте то же самое с вашим родителем.Не уверен, что это правильное решение, но я бы сделал это так.

...