如何为<ng-content>投影的kendo-textbox设置label的for属性？

问题场景 #

我要做一个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>

我给组件加了@Input() for: string|undefined;，想通过这个属性让点击标签时选中输入框，但用Kendo TextBox完全没效果：

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

但换成原生input，绑定[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>

问题原因 #

Kendo TextBox的DOM结构里，你设置的id="foo"是给Kendo组件本身的，内部的原生<input>元素会被自动生成一个派生ID（比如foo-1），kendo-label的for属性要匹配的是原生input的ID，不是组件的ID，所以直接绑定传入的for值找不到对应元素。

解决方案 #

修改info-label组件，通过@ContentChild获取投影进来的Kendo TextBox实例，拿到它内部原生input的真实ID，再绑定到kendo-label的for上：

修改后的组件代码 #

import { Component, Input, ContentChild, AfterContentInit } from '@angular/core';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';

@Component({
  selector: 'info-label',
  template: `
    <div class="label-container">
      <kendo-label class="k-form" [text]="text" [for]="targetInputId"></kendo-label>
      <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon>  
    </div>
    <ng-content></ng-content>
  `
})
export class InfoLabelComponent implements AfterContentInit {
  @Input() text: string = '';
  @Input() info?: string;
  @Input() for?: string;
  
  @ContentChild(TextBoxComponent) kendoTextBox?: TextBoxComponent;
  targetInputId?: string;

  ngAfterContentInit(): void {
    // 优先用Kendo TextBox的原生input ID，没有的话 fallback 到传入的for值
    this.targetInputId = this.kendoTextBox?.inputId || this.for;
  }
}

这样不管是用原生input还是Kendo TextBox，点击标签都能正确聚焦输入框了。

内容的提问来源于stack exchange，提问作者boop