web-dev-qa-db-ja.com

Angular6 @ViewChildはngIfで未定義

NgIfで表示されたコンポーネントで@ViewChildを使用すると問題が発生します。私はさまざまな解決策を見つけましたが、誰にとっても役に立ちませんでした。これは私の主要なコンポーネントで、さまざまなステップ(簡潔にするためにコードでは2つだけ示しました)で構成されており、前方ナビゲーション用のボタンと最初のステップでコンポーネントをリセットするためのボタンが付いています。最初のステップは、ページを開くときに表示されます。

...
<div class="my-container">
    <first-child *ngIf="showFirtChild"></first-child>
    <second-child *ngIf="showSecondChild"></second-child>
</div>
<button (click)="goToNextStep()"></button>
<button (click)="reset()"></button>
...
export class MainComponent implements OnInit {
    @ViewChild(FirstChild) private firstChildComp: MyFirstChildComponent;
    showFirtChild: boolean = true;

    ngOnInit() {
        //here firstChildComp is defined
    }

    //code for navigate through steps
    reset() {
        this.showFirtChild= true;
        this.firstChildComp.fillTable(); //fillTable is a function defined in MyFirstChildComponent
    }
...
}

ステップナビゲーション中にfirstChildCompへの参照が失われ、reset()が呼び出されると、childCompは未定義になります。原因はngIfであることを知っているので、ngAfterViewInitを使用しようとしました:

ngAfterViewInit() {
    this.fcomp = this.firstChildComp;
}

reset() {
        this.showFirtChild= true;
        this.fcomp .fillTable();
}

しかし、それは私の問題を解決しません。なにか提案を?

6
bigskull

それでも答えを探している場合は、静的フラグの値をtrueに設定してみることもできます。これにより、viewContainerRefの値に応じて子コンポーネントがngIfにロードされます。

1
Alejo Conejo