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

Question

我根据API获取的传入数据动态创建 Lead.__elasticsearch__.create_index! force:true 元素。

component.ts：

<mat-checkbox>

component.html

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

但是未呈现复选框输入，如果我使用<div [innerHTML]="content"></div> 而不是`

，则会出现相同的问题

，如果我将<input type="checkbox">静态添加到component.html中，它将正确呈现

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

注释：

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

例如：

• 编程
  • 前端
    • 角度
    • 反应
    • 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?