TypeScript -将HTML附加到Angular 2中的容器元素
TypeScript -将HTML附加到Angular 2中的容器元素
提问于 2016-08-24 22:36:54
我想要做的仅仅是在一个元素上附加一些html。我检查了一些链接，发现了不同的令人困惑的、不起作用的、不推荐的解决方案。
使用JavaScript，我将这样做：
var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');如何使用typescript/angular2，RC5实现相同的结果？
编辑
类为.one的元素是由外部js生成的，我不能修改它。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-08-24 22:38:14
1.
<div class="one" [innerHtml]="htmlToAdd"></div>this.htmlToAdd = '<div class="two">two</div>';另请参阅In RC.1 some styles can't be added using binding syntax
- Alternatively
<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>']);
}constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
var d1 = this.elementRef.nativeElement.querySelector('.one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}Stack Overflow用户
发布于 2018-08-08 04:59:11
使用新的angular类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);
}Stack Overflow用户
发布于 2016-08-24 22:38:44
你可以这样做：
htmlComponent.ts
htmlVariable: string = "<b>Some html.</b>"; //这是您需要显示的TypeScript代码中的html
htmlComponent.html
<div [innerHtml]="htmlVariable"></div> //这就是如何在html中显示来自TypeScript的html代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39126299
复制相关文章
相似问题