Question

我的文件中包含代码，

<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做到这一点吗？

Answer 1

因此，您不能使用*ngIf，因为这是外部组件。

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

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

Answer 2

您不应该明确地放置它们，只需在* ngIf处添加和隐藏并在需要时显示即可。

Answer 3

更糟糕的情况下，您可以使用简单的js手动添加它。

在ngAfterViewInit中，您创建了一个setTimeout，待angular完成后，我将调用它，并且html已准备好并呈现，并使用js对其进行更改。

使用Angular

3 个答案: