如何使用* ngIf Angular2

Question

我在Angular2中有2个兄弟组件：

<test1 *ngIf="data"  [data] = "makes" #test1R></formModel>
<testing *ngIf="data" [test1Ref]="test1R"></testing>

组件＆＃34;测试＆＃34;有一个函数调用test1的函数组件：

export class Testing{

    @Input() test1Ref: test1Component;
    constructor() { }

    testFunction($event){
        this.test1Ref.hello();
    }

我的问题是this.test1Ref未定义，因为test1组件有* ngIf（<test1 *ngIf="data"），
但没有* ngIf我在test1组件中输入值（[data] = "makes"）有错误。
如何使用* ngIf

传递组件引用

Answer 1

简而言之，你不能。如果!data，您必须隐藏组件，这样您的本地变量＃test1R仍将被设置。

<test1 [hidden]="!data" [data]="makes" #test1R></test1>

然后在ngOnInit()中的test1内进行null检查以避免异常。

如果您只能在设置数据后执行某些代码，请执行以下操作：

在test1组件中将数据声明为输入：

export class Test1 {
  @Input() data: any;
}

每次更改值时，通过将其声明为@Input，Angular将调用ngOnChanges，所以现在可以执行此操作：

ngOnChanges(changes: SimpleChanges) {
  if(changes['data'] && changes['data'].currentValue) {
    //Do something once data is set.
  }
}