子コンポーネントのデータを親コンポーネントへ渡す

● 子コンポーネントのデータを親コンポーネントへ渡す(基本)

1. 子コンポーネント ChildEditComponent で @Output() を宣言

子コンポーネント : ts

export class ChildEditComponent {
  @Output() childCreated = new EventEmitter<MyData>();

  onButtonClicked(): void {
    this.childCreated.emit(this.mydata);
  }
}

2. 親コンポーネント ParentEditComponent で @Output() を宣言

childCreated を受け取る

親コンポーネント : html

<my-edit-article (childCreated)="consoleShow($event)"></my-edit-article>

親コンポーネント : ts

export class ParentEditComponent {
  consoleShow(mydata: Mydata) {
    console.log( mydata );
  }
}

● 子コンポーネントのデータを親コンポーネントへ渡す(複数の引数を渡す)

一番いいのはモデルを作成してそのモデルを渡す方法ですが、次のように複数渡すこともできます。

子コンポーネント : ts

  @Output() childCreated = new EventEmitter<MyData>();

  ↓

  @Output() childCreated = new EventEmitter<{ id: number; mydata:MyData }>();
    this.childCreated.emit(this.mydata);

  ↓

    this.childCreated.emit({
        id: this.myid,
        mydata: this.mydata,
    });

親コンポーネント : ts

  consoleShow(mydata: Mydata) {
    console.log( mydata );
  }

  ↓

  consoleShow(childObj: any) {
    console.log( childObj.id );
    console.log( childObj.mydata );
  }

引用 : https://bit.ly/31YKrjD

No.1814
07/09 17:26

edit