TypeScript - 将HTML附加到Angular 2中的容器元素 [英] TypeScript - Append HTML to container element in Angular 2

问题描述

我想要做的只是在元素上添加一些html。
我检查了一些链接，我找到了不同的混淆/不工作/非推荐的/ etc解决方案。

What I want to do, is simply append some html on an element. I checked some links, and i find different confusing/non-working/non-recomended/etc solutions.

使用javascript我会做这样的事情

Using javascript I'll do something like this

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

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

How do I achieve the same result using typescript/angular2, RC5 ?

编辑

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

The element with class .one is generated by an external js, and I can't modify it

推荐答案

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：

or to prevent direct DOM access:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

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

3.

3.

constructor(private elementRef:ElementRef) {}

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

这篇关于TypeScript - 将HTML附加到Angular 2中的容器元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！