为什么子控件ID与组件ID相同

Question

我创建了一个可重用的组件“ my-textarea”，下面给出

<div>
<label *ngIf="label" [attr.for]="id">{{label}}</label>
<textarea #textarea [attr.id]="id"></textarea>
</div>

我正在使用它

 <my-textarea  id="txtResponse"></my-textarea>

问题是当我检查html时，它看起来像

<my-textarea  id="txtResponse">
<div>
<label *ngIf="label" [attr.for]="txtResponse">{{label}}</label>
<textarea #textarea [attr.id]="txtResponse"></textarea>
</div>
</my-textarea>

这意味着所有具有ID的控件都显示相同的ID，即 txtResponse 。为什么它在所有字段中显示相同的ID，我如何摆脱它？如果我没有将id传递给我的textarea，那么它不会显示子元素的id。