我刚开始学习角2,这是我第一次堆栈溢出的问题,所以这里去...角2事件同级组件之间的捉
我有两个嵌套的内部组件的外部组件。我在InnerComponent1
中有一个按钮,点击后会触发外部组件捕获的事件,然后将该值(始终为true)传递到InnerComponent2
。根据该值显示(* ngIf)InnerComponent2
。
它的工作原理。
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;
}
完善。非常感谢您的快速响应。按预期工作。只是为了澄清到底发生了什么:我们需要'inner2'中的事件发射器来触发变量的重新评估和重新渲染?因为发出的'showMeChange'事件没有被捕获到任何地方。 – David
我更新了我的答案(评论太长)。 –
速记。疑难杂症。这正是我所期待的。 **非常感谢。**官方的Angular2文档仍然缺乏,可以理解。 – David