Angularの@Input、@Output、EventEmitterを理解する

BY admin
|

Angularを初めて使う人にとって、特にサンプルコードを見て勉強するとき、InputとOutputデコレーターは少し混乱するものだと思います。 この記事では、最も簡単な方法でそれらを説明します。

データを交換するツール

まず最初に、Input と Output の考え方は、コンポーネント間でデータを交換することです。

入力はデータを受信するために使用され、出力はデータを送信するために使用されます。 出力は、イベント プロデューサ、通常は EventEmitter オブジェクトを公開してデータを送信します。

したがって、このようなコード

@Component({
selector: 'todo-item',
...
})export class TodoItemComponent {
@Input() item
@Output() onChange = new EventEmitter()
}

を見た場合、それは

  • 私に送られるデータを期待しています。 私はそれを受け取り、item プロパティに格納します
  • ところで、私は onChange プロパティを介してデータを生成して送信します。

例えば、TodoItem コンポーネントを含む TodoList コンポーネントがあるとしましょう。 TodoList テンプレートでは、

...
<todo-item
="myTask"
(onChange)="handleChange($event)"
</todo-item>
...

と表示されていると思いますが、これは、

  • TodoList が myTask プロパティにデータ値を入れて TodoItem に渡し
  • TodoItem から出されるデータは TodoList

で handleChange() 関数が受信して処理される、ことを意味しています。

@Input と @Output の動作

この例を見てみましょう。 ここでは、app コンポーネントの中にネストされた hello コンポーネントという 2 つのコンポーネントを作成しました。 hello コンポーネントには Input と Output があります

hello.component.ts
@Component({
selector: 'hello',
template: `
<h3 (click)="onClick.emit('Neo')">
...
</h3>
`
})export class HelloComponent {
@Input() myFriend: string
@Output() onClick = new EventEmitter()
}

文字列値を受け取ることを期待し、それを myFriend プロパティに格納します。

@Input() myFriend: string

それをクリックするたびに、Output プロパティの onClick は文字列 ‘Neo’ を外部に放出します。

<h3 (click)="onClick.emit('Neo')">

以下はアプリコンポーネントです

app.component.ts
export class AppComponent {
ng = 'Angular'
myName = 'Neo' upCase(st:string): void { ... }
}app.component.html
<hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello>
<h3>My name is {{ myName }}</h3>

アプリコンポーネントはテンプレートでhelloタグを使い、2つのことを行っていることに注意してください。

  • ng プロパティを介して文字列値 ‘Angular’ を hello に渡す
<hello myFriend="{{ ng }}"
  • hello から送信された値を受け取り、その値を upCase() 関数で処理する
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

このアプリはここで実行できます

。