带有 domSanitizer 的 innerHtml 不接受 angular 的原生属性答案

【问题标题】：innerHtml with domSanitizer not accept attributes natives of angular带有 domSanitizer 的 innerHtml 不接受 angular 的原生属性
【发布时间】：2019-06-12 00:03:12
【问题描述】：

我正在使用 angular 创建动态 html，但我无法使其正确地采用 angular 的原生属性。这在 @Component 模板中可以正常工作，但是这在任何变量中都不起作用。

...

@Component({
  selector: 'app-canvas-render',
  template: `<div [innerHtml]="this.objHtmlElement | domSanitizer: 'safeHtml'"></div>`,
})
export class CanvasRenderComponent implements OnInit {

  objHtmlElement = `<div div *ngFor="let element1 of objSchemaElement"
         [id]="element1.id" [index]="element1.index" class="edited"
         [ngStyle]="this.objElements[element1.index].styles | convertToStyle"
         [appStyleEditCanvas]="this.objStylesLogs.slice(-1)[0]">
      {{element1.id}} - {{element1.index}} - {{element1.type}}
    </div>`;

...

实际输出为：

{{element1.id}} - {{element1.index}} - {{element1.type}}

输出的html代码是：

<div div *ngfor="let element1 of objSchemaElement"
         [id]="element1.id" [index]="element1.index" class="edited"
         [ngstyle]="this.objElements[element1.index].styles | convertToStyle"
         [appstyleeditcanvas]="this.objStylesLogs.slice(-1)[0]">
     {{element1.id}} - {{element1.index}} - {{element1.type}}
</div>

【问题讨论】：

innerHTML 作为 HTML 传递，而不是作为模板传递。如果您想要根据对象类型使用不同的模板，您可以在组件的模板中定义<ng-template>s 并使用它们。

标签： angular

【解决方案1】：

innerHTML 不适用于包含此类 Angular 指令的 HTML。您将需要使用动态组件来完成此操作。看看this question 和随后的答案。这应该会让你朝着正确的方向开始。

这里是在StackBlitz 中工作的动态组件的清理和简化版本。希望有帮助:)

【讨论】：