Question

我试图通过@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初始化为不为null的东西时，应将其实例化，但我仍然会遇到有关child.stuff的错误。

有什么解决方法吗？

Answer 1

如果要使用@ViewChild，请使用设置器，然后将逻辑移至设置器。

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

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

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

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

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

1 个答案: