別の選択肢。
OPは、コールバックを使用する方法を尋ねました。この場合、彼は特にイベントを処理する関数（彼の例ではクリックイベント）を参照していました。これは、@ serginhoから受け入れられた回答として扱われます：with @OutputおよびEventEmitter。
ただし、コールバックとイベントには違いがあります。コールバックを使用すると、子コンポーネントは親からフィードバックや情報を取得できますが、イベントはフィードバックを期待せずに何かが発生したことを通知するだけです。
フィードバックが必要なユースケースがあります。コンポーネントが処理する必要がある色または要素のリストを取得します。いくつかの回答が示唆しているように、バインドされた関数を使用することも、インターフェイスを使用することもできます（これは常に私の好みです）。
例
これらのフィールドを持つすべてのデータベーステーブルで使用する要素{id、name}のリストを操作する汎用コンポーネントがあるとします。このコンポーネントは：
- 要素の範囲（ページ）を取得し、リストに表示する
- 要素の削除を許可する
- 要素がクリックされたことを通知し、親がいくつかのアクションを実行できるようにします。
- 要素の次のページを取得できます。
子コンポーネント
通常のバインディングを使用するには、1 @Input()つと3つの@Output()パラメーターが必要です（ただし、親からのフィードバックはありません）。例 <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>、しかしインターフェースを作成するのに必要なものは1つだけ@Input()です：
import {Component, Input, OnInit} from '@angular/core';
export interface IdName{
id: number;
name: string;
}
export interface IListComponentCallback<T extends IdName> {
getList(page: number, limit: number): Promise< T[] >;
removeItem(item: T): Promise<boolean>;
click(item: T): void;
}
@Component({
selector: 'list-ctrl',
template: `
<button class="item" (click)="loadMore()">Load page {{page+1}}</button>
<div class="item" *ngFor="let item of list">
<button (click)="onDel(item)">DEL</button>
<div (click)="onClick(item)">
Id: {{item.id}}, Name: "{{item.name}}"
</div>
</div>
`,
styles: [`
.item{ margin: -1px .25rem 0; border: 1px solid #888; padding: .5rem; width: 100%; cursor:pointer; }
.item > button{ float: right; }
button.item{margin:.25rem;}
`]
})
export class ListComponent implements OnInit {
@Input() callback: IListComponentCallback<IdName>; // <-- CALLBACK
list: IdName[];
page = -1;
limit = 10;
async ngOnInit() {
this.loadMore();
}
onClick(item: IdName) {
this.callback.click(item);
}
async onDel(item: IdName){
if(await this.callback.removeItem(item)) {
const i = this.list.findIndex(i=>i.id == item.id);
this.list.splice(i, 1);
}
}
async loadMore(){
this.page++;
this.list = await this.callback.getList(this.page, this.limit);
}
}
親コンポーネント
これで、リストコンポーネントを親で使用できます。
import { Component } from "@angular/core";
import { SuggestionService } from "./suggestion.service";
import { IdName, IListComponentCallback } from "./list.component";
type Suggestion = IdName;
@Component({
selector: "my-app",
template: `
<list-ctrl class="left" [callback]="this"></list-ctrl>
<div class="right" *ngIf="msg">{{ msg }}<br/><pre>{{item|json}}</pre></div>
`,
styles:[`
.left{ width: 50%; }
.left,.right{ color: blue; display: inline-block; vertical-align: top}
.right{max-width:50%;overflow-x:scroll;padding-left:1rem}
`]
})
export class ParentComponent implements IListComponentCallback<Suggestion> {
msg: string;
item: Suggestion;
constructor(private suggApi: SuggestionService) {}
getList(page: number, limit: number): Promise<Suggestion[]> {
return this.suggApi.getSuggestions(page, limit);
}
removeItem(item: Suggestion): Promise<boolean> {
return this.suggApi.removeSuggestion(item.id)
.then(() => {
this.showMessage('removed', item);
return true;
})
.catch(() => false);
}
click(item: Suggestion): void {
this.showMessage('clicked', item);
}
private showMessage(msg: string, item: Suggestion) {
this.item = item;
this.msg = 'last ' + msg;
}
}
を<list-ctrl>受け取るthis（親コンポーネント）コールバックオブジェクトとして注意してください。もう1つの利点は、親インスタンスを送信する必要がないことです。ユースケースで許可されている場合は、サービスまたはインターフェイスを実装するオブジェクトにすることができます。
完全な例は、このstackblitzにあります。
@Inputために、提案された方法は私のコードをspagettiにし、維持することを容易にしませんでした@Output。その結果、私は受け入れられた答えを変更しました