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

Question

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

如果我在模板中对输入元素的 id 进行硬编码，那么它在页面上将不是唯一的。但我不想必须将标识符从其包含组件传递到该组件中；标签和表单元素之间的连接正是该组件所关心的。

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

AngularJS 有一个范围 $id 属性，可用于构建唯一的 id。Angular 有类似的组件吗？

Answer 1

一种方法是使用 @Input 装饰器，并将值从组件所在的父组件传递到表单或标签所在的子组件

父组件

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

子组件

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

您可以在此链接 Angular2 中找到多次使用相同组件的类似示例。使用相同的组件根据服务响应在同一页面上显示不同的数据