我刚刚开始学习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;
}
内部组件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);
}
}
内部组件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;
}
在showMe
和shwo2Clicked
同步的值全身而退。
我加入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
,则不会发生任何事情,因为它已经存在true
并且showMe
尚未更新。使用EventEmitter
和双向速记绑定[(showMe)]
,show2Clicked
也将设置为false
whenshowMe
设置为,false
并将其设置true
为实际上是通过绑定向下传播的更改。
[(showMe)]="show2Clicked"
是的简写,[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"
并且仅当输出与输入具有相同名称但有一个附加名称时,该速记才有效Change
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句