我正在尝试将组件A中的一些信息通过父组件传递给组件B.
我有一个组件A,我有输出。
componentA.ts
<asp:DataList ID="dlComments" runat="server">
<asp:DataList ID="dlReplies" runat="server">
<asp:TextBox ID="txtReply" TextMode="MultiLine" Rows="3" Width="100%" runat="server"></asp:TextBox>
<asp:LinkButton ID="lbEdit" CommandName="Add" runat="server">Edit</asp:LinkButton>
</asp:DataList>
</asp:DataList>
componentB.ts
@Output() status = new EventEmitter();
public getColor() {
...
this.emit(color);
}
parent.html(需要在此HTML中包含组件B)
@Input('status') status;
ngOnInit() {
console.log(this.status) // Got EventEmitter false object
}
parent.ts
<componentA (status)="getStatus(s)"></componentA>
<componentB [status]="status"></componentB>
目前我正在获取&#34; EventEmitter {_isScalar:false,observers:Array(0),closed:false,isStopped:false,hasError:false ...&#34;消息,我无法查看从组件A传递的信息。我验证s存在于getStatus函数中。如果有更好的方法,请咨询。
答案 0 :(得分:1)
你的错误,
this.emit
,应为this.status.emit(..)
ngOnChanges
来监听更改而不是ngOnInit 请按照以下代码
@Component({
selector: 'my-app',
template: `
<div>
{{status}}
<componentA (status)="getStatus($event)"></componentA>
<componentB [status]="status"></componentB>
</div>
`,
})
export class App {
name:string;
status:string;
getStatus(event){
console.log(event)
this.status = event
}
constructor() {
}
}
@Component({
selector: 'componentA',
template: `
<div>
<button (click)="getColor()"> Click for red color</button>
</div>
`,
})
export class CompA {
@Output() status = new EventEmitter<string>();
public getColor() {
this.status.emit('red');
}
}
@Component({
selector: 'componentB',
template: `
<div>
</div>
`,
})
export class CompB {
@Input('status') status;
ngOnChanges() {
console.log('CompB input arrived', this.status) // Got EventEmitter false object
}
}
<强> LIVE DEMO 强>