Question

答案在下面

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);

但是我想添加嵌套的html元素，如下所示：

<div class="chat">

      <div class="chat-history">

      <div class="chat-message clearfix">

      <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">

      <div class="chat-message-content clearfix">

          <span class="chat-time">13:37</span>

          <h5>Marco Biedermann</h5>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

      </div> <!-- end chat-message-content -->

  </div> <!-- end chat-message -->

它将如何实现？简而言之，有什么方法可以创建以上html结构？否则它将使用this.renderer.createElement逐一创建，这是非常重复的代码。请帮助

有关更多信息，请检查此URL https://stackblitz.com/edit/angular-lpxhab ，在该位置添加输入值后无法进入enter

如何在单击按钮时以角度6创建多HTML小部件

0 个答案: