Question

我有2个组件，ComponentA和ComponentB，comp b是comp a的子代。 ComponentB基本上从ComponentA接收输入并生成视图。此输入是从rest调用获得的。因此，我将组件b选择器包装在* ngIf中。在此选择器中，我还附加了一个viewchild。

因此，基本上，我假设是在完全渲染ComponentB时，我想使用我的viewchild引用执行一些代码。这段代码用ComponentA内部的ngAfterViewInit（）编写。但是当我尝试访问this.viewChildReference时，它说未定义。

ComponentA.html

<div *ngIf="dataAvailable">
    <componentb #viewChildReference [data]="dataFromComponentA"></componentb>
</div>

ComponentA.ts

// skipping boiler code for brevity

class {
    dataAvailable = false;
    @ViewChild('viewChildReference') viewChildReference: ChildComponentModule;

    ngOnInit() {
        // fetch data from rest
        dataAvailable = true;
    }

    ngAfterViewInit() {
        this.viewChildReference.somemethod();
    }
}

ComponentB.html

// Use data from parent component and generate view

我该如何解决？我目前的方法有什么问题？请帮忙，因为我此时仍无法解决。.

更新：

这个问题不是重复的，因为我尝试了该问题注释中建议的其他解决方案，例如发出事件和其他答案。我仍然遇到问题，请将其取消标记为重复。

Answer 1

您可以尝试

@ViewChild('viewChildReference') 
set viewChildReference(v) {
   // v is the viewChild, handle your logic here
   // if v is defined.... 
}

演示https://stackblitz.com/edit/angular-egh5dg，顺便说一句，如果您使用其他方法，则该方法将始终与ngIf同步，例如，如果您订阅了api调用，则viewChildReference可能具有过时的引用，但是angular需要一些时间来更新viewChildReference，并且可能发生这种视图更新在订阅之后的情况。

Answer 2

您说过您正在从rest api获取数据。那是异步的。对ngAfterViewInit的调用是同步的，这意味着到调用它时，您的数据仍然不可用，因此由于ngIf而无法呈现该组件。 http通话结束后，您需要致电this.viewChildReference.somemethod();。像这样：

this.myService.someAPiCall().subscribe(data => {
    this.data = data;
    this.viewChildReference.somemethod();
})

ngAfterViewInit

更新：

2 个答案: