Question

我有一个只提供组件的Angular 5应用程序

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

但是这个子组件需要一些信息（例如，有其他创建的子组件的配置）配置是从外部源（休息）加载的，所以我创建了一个http.get请求并将其包装在一个rxjs Observable中

在我的AppComponent中，我有一个Observable<string>我可以订阅。我的TestComponent基本上无法在配置可用之前显示任何内容 - 所以我的问题是我如何等待组件的初始化/渲染，直到Rest-Response可用？

Answer 1

您可以通过点击生命周期挂钩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 }

Answer 2

您可以使用 *ngIf 指令在解析订阅或数据可用后实例化子组件。

<强>组件-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

在Observable数据可用后创建子Component

2 个答案: