如何在角度 4 中动态创建具有动态 ID 的 div答案

【问题标题】：How to dynamically create div with dynamic Id in angular 4如何在角度 4 中动态创建具有动态 ID 的 div
【发布时间】：2018-04-25 08:07:24
【问题描述】：

我正在尝试使用打字稿添加带有 id 的 div，但它没有分配它。我只得到 div

app.component.html

<div class="one" [innerHtml]="htmlToAdd">

</div>

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import * as shape from 'd3-shape';
import { ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   ngOnInit() {

    this.addDiv()

  }

  addDiv(){
     this.htmlToAdd = '<div class="two" id="myId">my div</div>';
  }

}

【问题讨论】：

你可能不得不绕过 Angular 的安全机制。 check this
@ochs.tobi 请删除您的评论。这是错误的诱导和完全错误的。
请参考https://stackoverflow.com/a/41979685/7458082
即使使用 domsanitizer 也无法通过 innerHTML 以角度添加动态 HTML。它只是将 HTML 呈现为标记。你需要动态组件加载之类的东西
类似npmjs.com/package/ng-dynamic-component

标签： angular

【解决方案1】：

为此提供一个遮阳篷，即使它可能不是最佳解决方案。 Here is a Stackblitz

在你的组件中

trustedHtml: SafeHtml;

constructor(public s: DomSanitizer) {}

ngOnInit() {
    this.addDiv();
}

public addDiv() {
    this.trustedHtml = this.s.bypassSecurityTrustHtml("<div class='two' id='myId'>my div</div>")
}

和你的 HTML

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

【讨论】：