如何输入通过与* ngIf Angular2组件参考

Question

我有2个兄弟姐妹组件Angular2：

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

组件“测试”具有调用test1的组件的功能的功能：

export class Testing{ 

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

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

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

Answer 1

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

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

然后null检查test1里面的ngOnInit()以避免异常。

如果你只能执行某些代码，一旦数据被设置，像这样做：

声明数据，因为test1的组件内的输入：

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

通过声明它作为一个@Input每次的值的变化，角度会调用ngOnChanges，所以现在你可以这样做：

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