* ngIf経由でまだ隠れているコンポーネントに対して* ngIfを使用するには？

Question

私は3つのコンポーネント、panel1、panel2、panel3を持っています。 panel1は常に存在します。私はpanel1がインタラクトされるまでpanel2を隠したいと思う。これは、panel1が常に存在するため、正常に動作します。

問題は、panel2が対話するまでpanel3を表示/非表示にしたいときです。 panel2がまだ存在しないため、ngIfが機能しない問題。

<div class="row"> 
    <div class="col-md-8 col-centered"> 
    <panel1 #p1 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel1> 
    </div> 
</div> 
<div class="row" *ngIf="p1.isPanelComplete()"> 
    <div class="col-md-8 col-centered"> 
    <panel2 #p2 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2> 
    </div> 
</div> 
<div class="row" *ngIf="(p2.isPanelComplete())"> <!-- Problem Here --> 
    <div class="col-md-8 col-centered"> 
    <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3> 
    </div> 
</div> 

私はこの

のようにパネル1と2の両方に

<div class="row" *ngIf="(p1.isPanelComplete() && p2.isPanelComplete())"> <!-- Problem Here --> 
    <div class="col-md-8 col-centered"> 
    <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3> 
    </div> 
</div> 

をチェックして、それを回避しようとしたが、それはどちらか動作するようには思えません。私は[非表示]を使わないように読んだので、私はそれを避けようとしています。これを回避する他の方法はありますか？ギュンターの回答

オクラホマため

アップデートは私はまだ＃P2からコンポーネントのメソッドをREFに必要があるためP2CするディレクティブP2を変更しなければならなかったディレクティブ

import {Output, EventEmitter, Directive, ElementRef, Renderer, Input} from '@angular/core'; 

@Directive({selector: 'onCreate'}) 
export class OnCreate { 
    @Output() onCreate = new EventEmitter(); 

    ngOnInit() { 
    this.onCreate.emit('dummy'); 
    } 
} 

を作成しました。私は間違いはないが、それは発射されないようだ。デバッグしようとしています。

<div class="row"> 
     <div class="col-md-8 col-centered"> 
      <panel1 #p1 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel1> 
     </div> 
    </div> 
    <div class="row" *ngIf="p1.isPanelComplete()"> 
     <div class="col-md-8 col-centered"> 
      <panel2 #p2 (onCreate)="p2c = true" [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2> 
     </div> 
    </div> 
    <div class="row" *ngIf="p2c && p2.isPanelComplete()"> 
     <div class="col-md-8 col-centered"> 
      <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3> 
     </div> 
    </div> 

Answer 1

あなたは...

@Directive(selector: 'onCreate') 
export class OnCreate { 
    @Output() onCreate:EventEmitter = new EventEmitter(); 

    ngOnInit() { 
    this.onCreate.emit('dummy'); 
    } 
} 

<panel2 (onCreate)="p2 = true" [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2> 

よう

<div class="row" *ngIf="p1.isPanelComplete() && p2">