无法从父组件获取子元素

Question

我试图使用@ViewChild从父组件中获取子元素，但是遇到了一个问题，因为我的子组件必须从父函数中启动。 发生这样的事情之后，我无法生孩子。 当子组件以ngOnInit或其他任何形式但不能与我的函数一起使用时，它工作正常……我在做什么错以及如何使它工作？

我的父母补偿：

export class MainScreenComponent {

    @ViewChild('myChild') child;
    showMyChild = false;

    getMyChild() {
        this.showMyChild = true;
        console.log(this.child.mytest); //undefined
    }

}

我父母的临时工：

<button (click)="getMyChild()">Start My Child Comp</button>
<hr>
<div *ngIf="showMyChild==true">
    <div my-child #myChild></div>
</div>

我的孩子

@Component({
    selector: '[my-child]'
})

export class StdOrderComponent {
    mytest = 'This goes to parent';
}

Answer 1

您的子级组件未初始化，因为<div my-child #myChild></div>在showMyChild = false时showMyChild = false DOM中。

我知道2个解决方案：

1. 使用[hidden]而不是*ngIf ，因此element始终存在，但隐藏

<div [hidden]="showMyChild">
    <div my-child #myChild></div>
</div>

2. 处理AfterView https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview （确切的生命周期挂钩我可能错了），以赶上添加子组件的时刻到DOM。

PS您不需要将boolean变量与true进行比较：

*ngIf="showMyChild==true"与* ngIf =“ showMyChild”