我刚刚开始学习 Angular 2,这是我的第一个 Stack Overflow 问题,所以这里...
我有一个带有两个嵌套内部组件的外部组件。我在 InnerComponent1
中有一个按钮,单击该按钮会触发外部组件捕获的事件,然后将值(始终为 true)传递给 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;
}
最佳答案
showMe
和 shwo2Clicked
值(value)观不同步。
我添加了 EventEmitter
至 <inner2>
并改变了
<inner2 [showMe]="show2Clicked"></inner2>
到
<inner2 [(showMe)]="show2Clicked"></inner2>
我猜它现在如你所愿地工作
http://plnkr.co/edit/tXzr3XgTrgMWMVzAw8d7?p=preview
更新
绑定(bind)[showMe]
只在一个方向上工作。当show2Clicked
设置为真,showMe
也将设置为 true。取消集showMe
回到假。如果那么show2Clicked
设置为 true
再次,没有任何反应,因为它已经是 true
和 showMe
没有更新。随着EventEmitter
和双向速记绑定(bind)[(showMe)]
, show2Clicked
也设置为 false
什么时候showMe
设置为 false
并将其设置为 true
实际上是通过绑定(bind)向下传播的更改。
[(showMe)]="show2Clicked"
是 [showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"
的简写只有当输出与输入同名但带有附加的 Change
时,简写才有效。
关于events - 兄弟组件之间的 Angular 2 事件捕获,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35685801/