Angular 尽管显示 "ng-reflect-id"，但 DOM 中缺少 id 属性

Question

什么会导致 Angular 不将 id 属性添加到我在 DOM 中的组件。

TS:

export class InputComponent extends BaseComponent {
    @Input() public id: string = '';
    ...
}

HTML :

    <lib-input
        id="{{ vo.id }}-username"
        label="Username"
        i18n-label
        [control]="vo.loginForm.username"
        [autofocus]="true"
    ></lib-input>

DOM :

<lib-input label="Username" 
   ng-reflect-label="Username" 
   ng-reflect-id="lib-ui-login-username" 
   ng-reflect-control="[object Object]" 
   ng-reflect-autofocus="true">

Stackblitz

Answer 1

字符串插值错误。如果没有 {{...}}，id 将按预期出现在 DOM。

我很失望 Angular 没有处理它。

编辑：实际上 HostBinding 是一个很好的解决方法。

export class MyInput {
  @Input()
  @HostBinding('attr.id')
  id: string;
}

Angular 尽管显示 "ng-reflect-id"，但 DOM 中缺少 id 属性

Angular missing id attribute in DOM despite displaying "ng-reflect-id"

html

angular

dom