我刚刚开始学习Angular 2,这是我的第一个Stack Overflow问题,所以这里有...
我有一个带有两个嵌套内部组件的外部组件。我在InnerComponent1
中有一个按钮,当单击它时,会触发外部组件捕获的事件,然后将值(始终为true)传递给InnerComponent2
。根据该值显示{* 1}}(* ngIf)。
有效。
Buuuut .. InnerComponent2
有一个按钮,点击该按钮会使该值为false,从而隐藏该组件。
也有效。
但是,一旦我隐藏InnerComponent2
,InnerComponent2
中显示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);
}
}
答案 0 :(得分:10)
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
并设置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");
}
}
);
}