Question

我有三个组件，panel1，panel2，panel3。 panel1始终存在。我想隐藏panel2，直到panel1与之交互。这很好用，因为panel1总是在那里。

问题是我想隐藏/显示panel3直到panel2与之交互。由于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>

但这似乎也不起作用。我读过不要使用[隐藏]所以我试图避免这种情况。还有其他方法来解决这个问题吗？

Gunter的答案更新

好的，我创建了指令

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');
  }
}

我必须将指令p2更改为p2c，因为我仍然需要从＃p2中引用组件中的方法。我没有得到错误，但它似乎没有发生。试图调试。

<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">

如何对仍然通过* ngIf隐藏的组件使用* ngIf？

1 个答案: