时间戳

首页 > 解决方案 > 如何在单击按钮时以 Angular 6 创建多个 html 小部件

angular - 如何在单击按钮时以 Angular 6 创建多个 html 小部件

问题描述

答案如下

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在添加输入值后无法进入的地方

标签： angular

解决方案

推荐阅读