Angular中如何在模板填充完成后再加载Web组件？

问题背景 #

在Angular应用中使用Web组件时，硬编码auth-token属性值可正常运行，但使用[attr.auth-token]="authVariable"动态绑定（authVariable有默认值，非异步获取）时，模板会优先于组件完成加载，导致Web组件因初始未获取到auth-token抛出错误，且后续赋值后无法恢复。

正常代码示例 #

<web-component
  auth-token="<AUTH_TOKEN>"
>
</web-component>

异常代码示例 #

<web-component
[attr.auth-token]="authVariable"
>
</web-component>

最简单解决方案 #

使用*ngIf控制Web组件的渲染时机，确保只有当authVariable就绪后才渲染组件，从根源避免初始加载错误：

<web-component
  *ngIf="authVariable"
  [attr.auth-token]="authVariable"
>
</web-component>

如果authVariable的默认值为假值（如空字符串），可调整判断条件确保变量初始化完成即渲染：

<web-component
  *ngIf="authVariable !== undefined"
  [attr.auth-token]="authVariable"
>
</web-component>

补充优化（可选） #

若Web组件暴露了对应的DOM属性（如驼峰命名的authToken），可直接使用属性绑定替代HTML属性绑定，配合*ngIf同样能解决问题：

<web-component
  *ngIf="authVariable"
  [authToken]="authVariable"
>
</web-component>

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