Question

我正在创建带有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>

Answer 1

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

此处清理并简化了StackBlitz中使用的动态组件的简化版本。希望能有所帮助：）

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

1 个答案: