如何将标签的“for”属性设置为用 <ng-content> 投影的剑道文本框？

Question

我想创建一个组件

info-label

，在标签旁边添加一个图标。

作为一个非常简单的草图，它应该看起来像这样

(label) (i)
(input field)

这就是我的组件的样子

<div class="label-container">
  <kendo-label class="k-form" [text]="text"></kendo-label>
  <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon>  
</div>

<ng-content></ng-content>

我尝试了几种方法来正确设置

for

属性，以便单击标签即可选择输入。但我无法让他们工作。

这就是我使用该组件的方式。我的组件有一个我在模板中使用的

@Input() for: string|undefined;

（没有成功）

<info-label text="ID" info="Identifier bla bla" for="foo">
  <kendo-textbox id="foo"></kendo-textbox>
</info-label>

无论如何都无法让它发挥作用。

---

当我使用 vanilla 输入并使用

[for]

时，它工作得很好。像这样

组件

<div class="label-container">
  <kendo-label class="k-form" [text]="text" [for]="for" />
  <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon> 
</div>

<ng-content></ng-content>

用法

<info-label text="ID" info="Identifier bla bla" for="bar">
  <input type="text" id="bar">
</info-label>

Answer 1

不幸的是，似乎没有办法用单个标签和输入来做到这一点。处理此问题的一种方法是将代码包装在

<ng-container>

标签中，并将 ngIf 移动到该容器中。

这是标签和文本框的示例：

<ng-container *ngIf="someBoolean">
    <kendo-label [for]="someInput" text="Some Input:"></kendo-label>
    <kendo-textbox #someInput [(ngModel)]="SomeValue" ></kendo-textbox>
</ng-container>

<ng-container *ngIf="!someBoolean">
    <kendo-label [for]="someInput" text="Some Input:"></kendo-label>
    <kendo-textbox #someInput [(ngModel)]="SomeOtherValue" ></kendo-textbox>
</ng-container>