时间戳

首页 > 解决方案 > 检测 *ngIf 执行后何时加载组件

javascript - 检测 *ngIf 执行后何时加载组件

问题描述

我试图通过刚刚加载的@ViewChild 装饰来初始化组件的成员，但是似乎组件的创建被延迟了，所以我最终得到了不存在的变量错误。

示例父组件片段：

{
   ...
   dependOnData = null;
   @ChildView('cview') child;
       setWidgetData(data) {
          dependOnData = new Object();
          child.stuff = data;
       }
    ...
 }

示例父组件 html：

  <app-childthing *ngIf="dependOnData !==null; else somethingelse"
    #cview>

  </app-childthing>

  <ng-template #soemthingelse>
....

  </ng-template>

如您所见，cview child 最初还不存在，但是当我将dependOnData 初始化为非空值时，它应该被实例化，但我仍然收到有关 child.stuff 不存在的错误。

任何解决方法？

标签： javascriptangulartypescript

解决方案

如果您想使用 @ViewChild，请使用 setter 并将您的逻辑移动到 setter。

@ViewChild('cview') set child(child: ChildType) {
    if (child) {
        child.stuff = data;
   } 
}

或者通过 Angular 将数据直接传递给孩子Input，它会自动进行绑定：

<app-childthing [stuff]="data" *ngIf="dependOnData !==null; else somethingelse">
</app-childthing>

<ng-template #soemthingelse>
    ...
</ng-template>

推荐阅读