Angular [innerHTML]绑定动态内容时嵌套属性绑定失效问题问询

根本原因 #

Angular 的模板绑定语法（例如 [href]、*ngFor 等）仅在 Angular 编译模板的阶段生效，你通过 [innerHTML] 插入的纯字符串内容不会被 Angular 二次编译，所以字符串中的 [href] 只会被识别为无意义的自定义属性，不会被解析为有效的链接属性。
不用安全管道时，Angular 的内置安全校验会把这类非标准属性过滤，所以 href 为空；用了安全管道后原始字符串被保留，浏览器本身不识别 [href] 这类 Angular 特有的语法，自然无法正常跳转。

解决方案 #

方案1：TS 层直接拼接原生 HTML（推荐，90% 场景适用）

不要在 HTML 字符串里写 Angular 绑定语法，直接在 TS 层拼接好完整的原生 HTML 内容即可：

// 动态链接可以提前在TS中拼接完成
const dynamicLink = "most/plain/url/link";
const dataArray = [
  {id: 1, innerHtml: `Some plain Txt`},
  // 直接写原生href属性，不要加[]
  {id: 2, innerHtml: `Some plain Txt with anchor: <a href="${dynamicLink}" rel="noopener noreferrer">Link</a>`},
  {id: 3, innerHtml: `Some plain Txt`},
]

模板中配合你现有的 safeHtml 管道使用即可：

<div *ngFor="let e of dataArray">
 <p [innerHTML]="e.innerHtml | safeHtml"></p>
</div>

方案2：动态编译模板（仅复杂场景使用）

如果你的动态内容需要用到 Angular 指令、双向绑定、自定义组件等复杂能力，可以使用 Angular 动态组件能力：将动态内容封装为独立组件，通过 ViewContainerRef.createComponent（Angular 13+ 语法）动态创建组件实例插入页面，该场景下模板会被 Angular 正常编译，所有绑定语法均可生效。

注意事项 #

如果插入的 HTML 来自用户输入，务必做好内容校验，避免 XSS 注入风险。

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