Создать дочерний компонент после того, как наблюдаемые данные станут доступны

Question

У меня есть приложение Angular 5, которое просто отображает компонент

export class AppComponent {
    @ViewChild(TestComponent) testElement: Testcomponent;
}

Но этому дочернему компоненту нужна некоторая информация (например, есть конфигурация для дополнительных созданных подкомпонентов) Конфиг загружается из внешнего источника (остальные), поэтому я создал запрос http.get и обернул его в Наблюдаемую rxjs

. В моем AppComponent у меня есть Observable<string>, где я могу подписаться.Мой TestComponent в принципе не может ничего показать до того, как конфиг станет доступен - поэтому мой вопрос в том, как я могу ждать с инициализацией / рендерингом компонента, пока не станет доступен Rest-Response?

Answer 1

Вы можете использовать * ngIf Директива для создания экземпляра дочернего компонента после разрешения подписки или при наличии данных.

Component-1

 public response$:Observable<Idata[]>;
    constructor(public service:ShareService)
      {
          this.response$= this.service.getdata();

      }

Шаблон компонента-1

<ng-container *ngIf="response$">
<hello [response]="response$"></hello>
</ng-container>

Компонент-2

export class HelloComponent  {
@Input() response:Observable<Idata[]>


}

Шаблон компонента-2

<div *ngFor="let item of (response|async)">
  {{item.body}}
<div>

LIVE DEMO

Answer 2

Это можно сделать, подключившись к хуку жизненного цикла OnInit и получив дочерний компонент для ввода данных с помощью async трубы.

Пример

// parent component
export class MyParent implements OnInit {
  myObservable$: Observable<any>;
  ngOnInit() {
    //do whatever you need to get observable.
  }
}
//parent html
<my-child [data]="myObservable$ | async"></my-child>

//child component
export class MyChild {
  @Input() data: //whatever data type it is
  // do stuff
}