Ich habe gerade angefangen, Angular 2 zu lernen, und dies ist meine allererste Stapelüberlauf-Frag

Ich habe eine äußere Komponente mit zwei verschachtelten inneren Komponenten. Ich habe eine Schaltfläche inInnerComponent1, das beim Klicken ein Ereignis auslöst, das von der äußeren Komponente abgefangen wird, und das den Wert (immer wahr) an @ übergibInnerComponent2. InnerComponent2 wird basierend auf diesem Wert angezeigt (* ngIf).

Es klappt

Buuuut ..InnerComponent2 hat eine Schaltfläche, die beim Klicken diesen Wert auf false setzt, wodurch die Komponente ausgeblendet wird.

Das funktioniert auch.

Aber sobald ich mich versteckt habeInnerComponent2, die Schaltfläche inInnerComponent1 das zeigtInnerComponent2 funktioniert nicht mehr. Ich sehe keine Fehler und habe bestätigt, dass die äußere Komponente die Ereignisse noch empfängt.

Hier ist ein Plan, der das Szenario zeigt:http: //plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7? p = preview

Irgendwelche Gedanken?

Vielen Dank

Outer component

//our root app component
import {Component} from 'angular2/core';
import {Inner1Component} from 'src/inner1';
import {Inner2Component} from 'src/inner2';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <p>OuterComponent</p>
    <inner1 (show2)="show2Clicked = $event"></inner1>
    <inner2 [showMe]="show2Clicked"></inner2>
  `,
  directives: [Inner1Component, Inner2Component]
})
export class App {
  show2Clicked: boolean;
}

InnerComponent1

import {Component, EventEmitter, Output} from 'angular2/core'

@Component({
  selector: 'inner1',
  providers: [],
  template: `
    <p>inner1</p>
    <button (click)="showInner2()">Show inner2</button>
  `,
  directives: []
})
export class Inner1Component {
  @Output() show2 = new EventEmitter<boolean>();

  showInner2() {
    this.show2.emit(true);
  }
}

InnerComponent2

import {Component, Input} from 'angular2/core'

@Component({
  selector: 'inner2',
  providers: [],
  template: `
    <div *ngIf="showMe">
      <p>Inner2</p>
      <button (click)="showMe = false">Cancel</button>
    </div>
  `,
  directives: []
})
export class Inner2Component {
  @Input() showMe: boolean;
}