通过父组件传递输入和输出

时间:2017-05-28 05:08:09

标签: angular typescript components eventemitter

我正在尝试将组件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函数中。如果有更好的方法,请咨询。

1 个答案:

答案 0 :(得分:1)

你的错误,

    组件A中的
  • this.emit,应为this.status.emit(..)
  • 在您的组件B中,您应该使用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