Question

我在模板中有一个div，该模板具有#divMessages作为模板引用名称。

          <div  #divMessages></div>

当某些事件发生时，我想将html标记附加到此div。我以以下方式尝试过，但是将html标签附加为字符串。

            this.divMessages.nativeElement.append('<li>'+data.message+ '</li>');

我当前的方法将html标签视为字符串。我如何附加html标签，以隐藏标签并仅显示数据。（在上述情况下，仅显示列表项，而标签则隐藏）。

Answer 1

我通过使用Renderer2 Abstract类解决了这个问题，该类是Angular提供的用于处理DOM元素的服务。从角铁芯导入Renderer2。然后创建元素并在其中添加文本。

  import {Component, OnInit,NgModule, Renderer2 } from '@angular/core';

将Renderer2对象传递给类Constructur。

constructor(private http: HttpClient,private renderer:Renderer2) { }

//create the DOM element 
let li=this.renderer.createElement('li');

//create text for the element
const text = this.renderer.createText(data.message);

//append text to li element
  this.renderer.appendChild(li, text);

//Now append the li tag to divMessages div
this.renderer.appendChild(this.divMessages.nativeElement,li);

我使用@ViewChild装饰器将div作为divMessages

 @ViewChild("divMessages", {read: ElementRef}) private divMessages: ElementRef;

Answer 2

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

在打字稿中，您可以通过这种方式追加

var appendElement = '<li>'+data.message+'</li>' ;
this.divMessages = appendElement;

如何在Angular 6中将HTML标签或元素附加到div？

2 个答案: