角（4）：クラスオブジェクトを子コンポーネントから親コンポーネントに渡す

Question

Personのようなクラスオブジェクトを、parentコンポーネントのchildコンポーネントに問題なく渡すことができます。しかし、childコンポーネントでそのオブジェクトを操作して、parentコンポーネントに戻したいと思います。

これは、子コンポーネントのクラスです：

export class ActionPanelComponent { 
    @Input('company') company: Company; 
    @Output() notify: EventEmitter = new EventEmitter(); 

    constructor() { 
    } 

    public deleteCompany() { 
    console.log('display company'); 
    console.log(this.company); 
    // FIXME: Implement Delete 
    this.company = new Company(); 
    } 

    public onChange() { 
    this.notify.emit(this.company); 
    } 

} 

これは、このコンポーネント（抜粋）のhtmlです：これは、親コンポーネントクラス（抜粋）です

<div class="row" (change)="onChange()"> 
    <div class="col-xs-2"> 
    <button md-icon-button > 
     <md-icon>skip_previous</md-icon> 
    </button> 
    </div> 

：

public onNotify(company: Company):void { 
    this.company = company; 
    } 

と親コンポーネントのHTML（抜粋）：

<action-panel [company]="company" (notify)="onNotify($event)"></action-panel> 

私は.emitの内側に私のcompanyオブジェクトを渡すことはできませんし、何も動作するので、私は何か間違ったことをしています。

コンポーネント間の双方向オブジェクトバインディングを実現する正しい方法は何ですか？ ありがとうございます！ EventEmitterべきemitをType TSを伝えるために、このような

Answer 1

変更を：

export class ActionPanelComponent { 
    @Input('company') company: Company; 
    @Output() notify = new EventEmitter<Company>(); //<---- On this line! 

    constructor() { 
    } 

    public deleteCompany() { 
    console.log('display company'); 
    console.log(this.company); 
    // FIXME: Implement Delete 
    this.company = new Company(); 
    } 

    public onChange() { 
    this.notify.emit(this.company); 
    } 
} 

Answer 2

あなたはEventEmitterの初期化の種類を欠落していました。

子コンポーネント（TS）

export class ActionPanelComponent { 
    @Input('company') company: Company; 
    @Output() companyChange: EventEmitter = new EventEmitter<Company>(); 

    constructor() { 
    } 

    public deleteCompany() { 
     console.log('display company'); 
     console.log(this.company); 
     // FIXME: Implement Delete 
     this.company = new Company(); 
    } 

    public onChange() { 
     this.companyChange.emit(this.company); 
    } 

} 

親コンポーネント（HTML）

<action-panel [(company)]="company"></action-panel> 

：

次の2つの方法でオブジェクトバインディングを実装するために結合Outputを使用することができますこのように、特別な関数を宣言する必要はありませんonNotify。 onNotify関数が必要な場合は、出力バインディングに別の名前を使用します。

export class ActionPanelComponent { 
    @Input('company') company: Company; 
    @Output() notify: EventEmitter = new EventEmitter<Company>(); 

    constructor() { 
    } 

    public deleteCompany() { 
     console.log('display company'); 
     console.log(this.company); 
     // FIXME: Implement Delete 
     this.company = new Company(); 
    } 

    public onChange() { 
     this.notify.emit(this.company); 
    } 

}