兄弟组件之间的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

我遇到了同样的问题，在单击同级组件中的按钮时切换表单。我的解决方案是使用公共服务。

所以在组件 1 中：

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

在组件 2 中：

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

Answer 2

showMe 和 shwo2Clicked 值不同步。

我将 EventEmitter 添加到 <inner2> 并更改了

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

到

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

我猜它现在正在按您的预期工作

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

更新

绑定[showMe] 仅在一个方向上起作用。当show2Clicked 设置为true 时，showMe 也将设置为true。 Cancel 将 showMe 设置回 false。如果然后show2Clicked 再次设置为true，则不会发生任何事情，因为它已经是true 并且showMe 没有更新。使用EventEmitter 和双向速记绑定[(showMe)]，当showMe 设置为false 时，show2Clicked 也设置为false，并将其设置为true 实际上是向下传播的更改虽然绑定。

[(showMe)]="show2Clicked" 是 [showMe]="show2Clicked" (showMeChange)="show2Clicked=$event" 的简写，并且该简写仅在输出与输入同名但带有额外的 Change 时才有效