Question

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

我的父母comp：

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

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

我知道2个解决方案：

使用[hidden]代替*ngIf，因此元素始终存在，但隐藏

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

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

P.S。您无需将boolean变量与true进行比较：

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

无法从父组件获取子元素

1 个答案: