events - 兄弟组件之间的Angular 2事件捕获

我刚刚开始学习Angular 2，这是我的第一个Stack Overflow问题，所以这里...

我有一个带有两个嵌套内部组件的外部组件。我在InnerComponent1中有一个按钮，单击该按钮会触发外部组件捕获的事件，然后将值(始终为true)传递到InnerComponent2中。根据该值显示InnerComponent2(* ngIf)。

有用。

Buuuut .. InnerComponent2具有一个按钮，当单击该按钮时，该值将变为false，这将隐藏该组件。

那也行。

但是，一旦我隐藏了InnerComponent2，则InnerComponent1中显示InnerComponent2的按钮将不再起作用。我没有看到任何错误，并且已经确认外部组件仍在接收事件。

这是显示场景的plnkr:http://plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7?p=preview

有什么想法吗？

非常感谢。

外部组件

//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;
}

最佳答案

showMe和shwo2Clicked值不同步。

我在EventEmitter中添加了<inner2>并进行了更改

<inner2 [showMe]="show2Clicked"></inner2>

至

<inner2 [(showMe)]="show2Clicked"></inner2>

我想它现在按预期工作了

http://plnkr.co/edit/tXzr3XgTrgMWMVzAw8d7?p=preview

更新

绑定(bind)[showMe]仅在一个方向上起作用。当show2Clicked设置为true时，showMe也将设置为true。取消将showMe设置回false。如果然后show2Clicked再次设置为true，则不会发生任何事情，因为它已经是true并且showMe尚未更新。通过EventEmitter和双向双向绑定(bind)[(showMe)]，当show2Clicked设置为false并将showMe设置为false实际上是通过绑定(bind)向下传播的更改时，true也设置为[(showMe)]="show2Clicked"。
[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"是Change的简写，仅当输出与输入具有相同的名称但带有附加的ojit_code时，该简写才有效