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();
}
しかし、それは私の問題を解決しません。なにか提案を?
それでも答えを探している場合は、静的フラグの値をtrueに設定してみることもできます。これにより、viewContainerRef
の値に応じて子コンポーネントがngIf
にロードされます。