如何在可重用的Angular组件模板中获取标签的表单输入元素的id？

Question

我有一个Angular 2组件，它包含一些与它们相关联的表单输入元素和标签。组件的多个实例可能同时位于页面中。如何设置for的{​​{1}}属性和label的{​​{1}}属性以将它们相互连接？

如果我在模板中硬编码输入元素的id，那么它在页面上不会是唯一的。但我不想将标识符从其包含的组件传递到此组件中;标签和表单元素之间的联系只是这个组件的关注点。

id

AngularJS有一个范围$ id属性，可用于构建唯一ID。 Angular对组件有什么相似之处吗？

Answer 1

一种方法是使用@Input装饰器并将您拥有该组件的父级值传递给您的表单或标签所在的子组件

为父级

<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;
}

您可以在此链接Angular2 .. Using the same component to show different data on the same page depending on service response

中找到多次使用相同组合的类似示例