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

时间:2016-02-28 17:29:39

标签: events angular

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

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

有效。

Buuuut .. InnerComponent2有一个按钮,点击该按钮会使该值为false,从而隐藏该组件。

也有效。

但是,一旦我隐藏InnerComponent2InnerComponent2中显示InnerComponent1的按钮就不再有效了。我没有看到任何错误,我已经确认外部组件仍在接收事件。

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

有什么想法吗?

非常感谢。

外部组件

InnerComponent2

InnerComponent1

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

InnerComponent2

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

2 个答案:

答案 0 :(得分:10)

showMeshwo2Clicked值不同步。

我添加了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,则不会发生任何事情,因为它已经trueshowMe未更新。使用EventEmitter和双向速记绑定[(showMe)],当show2Clicked设置为false并设置showMe时,false也设置为true[(showMe)]="show2Clicked"实际上是通过绑定向下传播的更改。

[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"Change的简写,只有在输出与输入名称相同但附加$payment->create($this->_api_context);

时,速记才有效

答案 1 :(得分:0)

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

所以在组件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");
            }
        }
    );
}