时间戳

首页 > 解决方案 > 使用 Angular 在 div 中创建 div

html - 使用 Angular 在 div 中创建 div

问题描述

我的文件中有代码，即

<kendo-chat
    [messages]="feed | async"
    [user]="user"
    (sendMessage)="sendMessage($event)">
  </kendo-chat>

在浏览器中加载后，它包含此代码

<kendo-chat>
  <div class="k-message-box">
     <input class="k-input" type="text" placeholder="Type a message..." />
     <button class="k-button-send k-button k-flat"></button>
  </div>
</kendo-chat>

我无法手动编辑<kendo-chat>. 我想在其中添加一个 div 元素，这是我的预期结果。

<kendo-chat>
  <div class="k-message-box">
     //ADDED DIV
     <div>
       <i class="fa fa-paperclip"></i>
     </div>
     //ADDED DIV
     <input class="k-input" type="text" placeholder="Type a message..."/>
     <button class="k-button-send k-button k-flat"></button>
  </div>
</kendo-chat>

有人可以帮助我如何使用 Angular 8 做到这一点。在此先感谢。

标签： htmlangular

解决方案

所以，你不能使用*ngIf，因为这是一个外部组件。

然后您可以在生命周期内或之后使用Renderer2 。ngAfterViewInit

constructor(private renderer: Renderer2){}

ngOnInit() {
  const div = this.renderer.createElement('div');
  const text = this.renderer.createText('Hello world!');

  this.renderer.appendChild(div, text);
  this.renderer.appendChild(this.el.nativeElement, div);
}

推荐阅读