入力は、親コンポーネントが子コンポーネントがアクセスできるプロパティをバインドできるようにするメカニズムを提供します。 親コンポーネントは、プロパティを子コンポーネントにプッシュします。
この投稿は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 }}