TypeScript - 将 HTML 附加到 Angular 2 中的容器元素

Question

我想要做的只是在元素上附加一些 html。我检查了一些链接，发现了不同的令人困惑、不起作用、不推荐的解决方案。

使用 JavaScript，我会做这样的事情：

 var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

如何使用 typescript/angular2、RC5 获得相同的结果？

编辑

类为 .one 的元素是由外部js生成的，我无法修改。

原文由 Gerald Hughes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1.

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

 this.htmlToAdd = '<div class="two">two</div>';

另见 在 RC.1 中，某些样式无法使用绑定语法添加

1. 或者

<div class="one" #one></div>

 @ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

或防止直接 DOM 访问：

 constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}

3.

 constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用新的角度类 Renderer2

 constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

原文由 J.J 发布，翻译遵循 CC BY-SA 4.0 许可协议