动态创建的 mat-checkbox 未正确呈现

Question

我根据 API 获取的传入数据动态创建 <mat-checkbox> 元素。

component.ts:

this.content = sanitizer.bypassSecurityTrustHtml(`<mat-checkbox>test</mat-checkbox>`)

component.html

<div [innerHTML]="content"></div>

但未呈现复选框输入，如果我使用 <input type="checkbox"> 而不是 `

如果我将<mat-checkbox 静态添加到component.html，它会正确呈现

请检查此回购： https://stackblitz.com/edit/angular-8heckn

注意：

this.content 是一个字符串，而不是一个对象。因为我想在每个子输入之前添加额外的空格（制表符）。

例如：

• 编程
  • 前端
    • 角度
    • 反应
    • Vue
  • 后端
    • node.js
    • express.js
    • php

Answer 1

“Angular 不处理动态添加的 HTML，它只是逐字添加，除了一些清理以防止安全问题。” [请参阅 Stackoverflow 问题 How to dynamically add innerHTML with angular 2 components]

要了解动态添加 Angular 组件，请参阅以下内容：

• Dynamically ADDING and REMOVING Components in Angular
• Angular2: Insert a dynamic component as child of a container in the DOM
• Angular: How to dynamically load a component defined by a string?