Angularの親子コンポーネント通信の詳細な説明

使用されるAPI

Input - 子コンポーネントで許容されるプロパティを定義します。親コンポーネントはこれを使用して子コンポーネントにデータを渡すことができます。

Output - 子コンポーネントの出力プロパティ。親コンポーネントに対応するアクションを実行するように通知するには、このプロパティは EventEmitter イベントタイプである必要があります。

EventEmitter - @Output ディレクティブを持つコンポーネントで使用され、カスタムイベントを同期的または非同期的に発行し、インスタンスをサブスクライブしてこれらのイベントのハンドラーを登録します。

簡単な例

リスト内のサブコンポーネントをレンダリングし、サブコンポーネントをクリックして親コンポーネントに操作を実行するように通知します。

人.ts

エクスポートインターフェースPerson {
  名前: 文字列;
  年齢: 番号;
  性別: 文字列;
}

親コンポーネント

'@angular/core' から Component、OnInit をインポートします。
'./person' から { Person } をインポートします。
@成分（{
  セレクター: 'app-comp-parent',
  テンプレート: `
    <app-comp-child
      *ngFor="let person of personList"
      (itemClick)="onItemClick($event)"
      [データ]="人"
    </app-comp-child> ...
  `、
})
CompParentComponentクラスをエクスポートし、OnInitを実装します。
  人リスト: 人[] = [
    { 名前: '张三', 年齢: 21, 性別: '男' },
    { 名前: 'Li Si'、年齢: 25、性別: '男性' },
    { 名前: '李璃', 年齢: 20, 性別: '女' },
  ];
  コンストラクタ(){}
  ngOnInit(): void { }
  onItemClick(アイテム: 人){
    console.log('クリック人: ', アイテム);
  }
}

サブコンポーネント

'@angular/core' から Component、EventEmitter、Input、OnInit、Output } をインポートします。
'./person' から { Person } をインポートします。
@成分（{
  セレクター: 'app-comp-child',
  テンプレート: `
    <div (クリック)="itemClick.emit(データ)">
      名前: {{ data.name }}
      年齢: {{ data.age }}
      性別: {{ data.sex }}
    </div>
  `、
})
CompChildComponentクラスをエクスポートし、OnInitを実装します。
  @Input() データ!: Person;
  @Output() itemClick = 新しい EventEmitter();
  コンストラクタ(){}
  ngOnInit(): void { }
}