Angular 2事件在兄弟组件之间捕获

Question

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

我有一个带有两个嵌套内部组件的外部组件.我有一个按钮InnerComponent1,当点击时,会触发外部组件捕获的事件,然后将值传递给(总是为真)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;
}

Answer 1

该showMe和shwo2Clicked值不同步.

我加入EventEmitter到<inner2>和改变

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

至

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

我想它现在正如你所期望的那样工作

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

更新

绑定[showMe]仅在一个方向上起作用.当show2Clicked设置为true时,showMe也将设置为true.取消设置showMe为false.如果再show2Clicked设置为true再次,什么都不会发生,因为它已经true并且showMe不会被更新.使用EventEmitter和双向速记绑定[(showMe)],show2Clicked也设置为何false时showMe设置为false并将其设置true为实际上是通过绑定向下传播的更改.

[(showMe)]="show2Clicked"是一个简写,[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"只有当输出与输入同名但附加一个时,速记才有效Change