ngAfterViewInit 中未定义的 Angular viewchild

Question

我有 2 个组件，组件 A 和组件 B，组件 b 是组件 a 的子组件。 ComponentB 基本上从 ComponentA 获取输入并生成 View 。此输入是从休息电话中获得的。所以我将我的组件 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 同步，viewChildReference 可能有过时的引用，比方说，如果您订阅了 api 调用，但是 angular 需要时间来更新 viewChildReference，并且这个 View 更新可能落后于订阅。