Events 同级组件之间的角度2事件捕获

我刚刚开始学习Angular 2，这是我有史以来第一个堆栈溢出问题，所以这里是

我有一个外部组件和两个嵌套的内部组件。我在

InnerComponent1

中有一个按钮，当单击该按钮时，触发外部组件捕获的事件，然后将值（始终为true）传递到

InnerComponent2

<代码>内部组件2基于该值显示（*ngIf）

它起作用了

布乌特

InnerComponent2

有一个按钮，当单击该按钮时，该按钮会使该值为false，从而隐藏该组件

这也行

但是一旦我隐藏了

InnerComponent2

，显示

InnerComponent2

的

InnerComponent1

中的按钮就不再工作了。我没有看到任何错误，我已经确认外部组件仍在接收事件

以下是一个plnkr，显示了该场景：

有什么想法吗

非常感谢

外部组件

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

//我们的根应用程序组件
从'angular2/core'导入{Component}；
从'src/inner1'导入{Inner1Component}；
从'src/inner2'导入{Inner2Component}；
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
外部组件

`,
指令：[内部1组件，内部2组件]
})
导出类应用程序{
show2单击：布尔值；
}

内部组件1

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

import{Component，EventEmitter，Output}来自'angular2/core'
@组成部分({
选择器：“inner1”，
提供者：[]，
模板：`
内部1

显示内部2
`,
指令：[]
})
导出类Inner1组件{
@Output（）show2=新的EventEmitter（）；
showInner2（）{
this.show2.emit（true）；
}
}

内部组件2

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

从'angular2/core'导入{组件，输入}
@组成部分({
选择器：'inner2'，
提供者：[]，
模板：`
内部2

取消
`,
指令：[]
})
导出类Inner2组件{
@Input（）showMe:boolean；
}

单击的

showMe

和

shwo2值不同步

我在
中添加和
EventEmitter
，并进行了更改

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



到



我想它现在正按照你的预期工作


更新

绑定只能在一个方向上工作。当
show2Clicked
设置为true时，
showMe
也将设置为true。取消设置
showMe
返回false。如果
show2Clicked
再次设置为
true
，则不会发生任何事情，因为它已
true
且
showMe
未更新。使用
EventEmitter
和双向速记绑定
[（showMe）]
，当
showMe
设置为
false
时，
show2Clicked
也设置为
false
，并且将其设置为
true
实际上是一个通过绑定向下传播的更改

[（showMe）]=“show2Clicked”
是
[showMe]=“show2Clicked”（showmechage）=“show2Clicked=$event”
的简写，并且仅当输出与输入具有相同的名称，但有额外的
更改时，简写才起作用。我有同样的问题，在单击同级组件中的按钮时切换表单。我的解决方案是使用公共服务

因此，在第1部分：

<button (click)="showMessageForm()" >
showForm = true;
showMessageForm() {
    this.messageService.switchMessageForm(this.showForm);
    this.showForm = !this.showForm;
}

完美的非常感谢您的迅速回复。一切正常。只是为了澄清这里到底发生了什么：我们需要
inner2
中的事件发射器来触发变量的重新计算和重新渲染？因为发出的
showMeChange
事件不会在任何地方被捕获。速记。明白了。这正是我想要的。非常感谢。可以理解的是，Angular2的官方文档仍然缺乏。这对它的工作至关重要
只有当输出与输入同名但又有额外更改时，速记才有效
，并且您是令人敬畏的@Günter ZöchbauerWas最终添加到文档中：）
<button (click)="showMessageForm()" >
showForm = true;
showMessageForm() {
    this.messageService.switchMessageForm(this.showForm);
    this.showForm = !this.showForm;
}

switchMessageFormEvent = new EventEmitter<boolean>();
switchMessageForm(bSwitch:boolean) {
    this.switchMessageFormEvent.emit(bSwitch);
}

ngOnInit() {
    this.messageService.switchMessageFormEvent.subscribe(
        (bSwitch: boolean) => {
            if(bSwitch) {
                $('.message-input').slideDown("normal");
            }else {
                this.myForm.reset();
                $('.message-input').slideUp("normal");
            }
        }
    );
}