再利用可能なAngularコンポーネントテンプレート内のラベルのフォーム入力要素のIDを取得するにはどうすればよいですか？

Question

私はいくつかのフォームの入力要素とそれらに関連付けられるべきラベルを保持するAngular 2コンポーネントを持っています。コンポーネントの複数のインスタンスがページ内に同時に存在する可能性があります。 labelのfor属性とinputのid属性を設定して相互に接続するにはどうすればよいですか？

入力要素のIDをテンプレートにハードコードすると、ページ上で一意になりません。しかし、私は、そのコンポーネントを含むコンポーネントからこのコンポーネントに識別子を渡す必要はありません。ラベルとフォーム要素の間の接続は、このコンポーネントの関心事です。

<div> 
    <label for="???">Name</label> 
    <input [(ngModel)]="name" type="text" id="???"/> 
</div> 

AngularJSには、一意のIDを作成するために使用できるscope $ idプロパティがあります。 Angularにはコンポーネントと同様のものがありますか？

Answer 1

一つの方法は、@Inputデコレータを使用して、フォームまたはlableは

parentComponentに

<myComponent idToUse="id1"></myComponent> 
<myComponent idToUse="id2"></myComponent> 

ChildComponent

@Component({ 
selector : "myComponent", 
template: `<div> 
    <label for="{{idToUse}}">Name</label> 
    <input [(ngModel)]="name" type="text" id="{{idToUse}}"/> 
</div>` 
}) 
export class childComponent { 
@Input() idToUse; 
} 

ある子コンポーネントには、コンポーネントを持っている親から値を渡すことです

このリンクで同じcompnentを複数回使用した場合の同様の例が見つかりましたAngular2 .. Using the same component to show different data on the same page depending on service response