コンポーネントとAngularの入力との相互作用

提供:Dev Guides
移動先:案内検索

入力は、親コンポーネントが子コンポーネントがアクセスできるプロパティをバインドできるようにするメカニズムを提供します。 親コンポーネントは、プロパティを子コンポーネントにプッシュします。

この投稿はAngular2以上をカバーしています


親コンポーネントのテンプレートで、子のセレクターでプロパティバインディングを定義するだけです。 バインディングは、子コンポーネントで使用できるようにする等号の右側にある親コンポーネントのクラスで使用可能なプロパティを指している必要があります。 バインディング自体の名前(等号の左側)については、完全にあなた次第です。

親コンポーネントテンプレート:story.component.html

<selected-story [story]="currentStory" [character]="mainCharacter">
</selected-story>

親コンポーネントクラス:story.component.ts

export class StoryComponent {
  currentStory: string = 'The Fox Without a Tail';
  mainCharacter: string = 'Henry';
}

次に、子コンポーネントで、 @ angle /codeからInputをインポートし、次のように@Inputデコレータを使用して入力を定義します。

子コンポーネントクラス:selected-story.component.ts

import { Component, Input } from '@angular/core';

//...

これで、子コンポーネントは親コンポーネントからcurrentStoryとmainCharacterの値にアクセスできるようになりました。 代わりに、子コンポーネントのプロパティ myCharacter を呼び出すために、characterのエイリアスを作成したことに注意してください。

子コンポーネントテンプレート:selected-story.component.html

The story: {{ story }}
The character: {{ myCharacter }}

関連項目: