将 HTML 标记附加到 Angular 2 中动态创建的 DOM

Question

我有动态创建的表头，如何使用类名访问它并以纯角度方式附加一个 HTML 标记

之前

<div class="column-header">Header</div>

之后

<div class="column-header">Header<span>Some value</span></div> 

import { Directive, ElementRef, Input, ViewChild, OnInit, Renderer2 } from "@angular/core";

@Directive({ selector: 'column-header' })
export class ColumnDirective implements OnInit {
    elem: ElementRef;

  constructor(private renderer: Renderer2, private el: ElementRef) {
      this.elem=el;
  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    const span1 = "<span class='mytooltip ico-help fa fa-question-circle'>";
    const span2 = "<span class='tooltiptext'>Question</span>";
    setTimeout(() => {
        this.renderer.appendChild(span1,span2);
        this.renderer.appendChild(this.el.nativeElement, span1);
    }, 0);
  }
}

我不想使用任何 jquery 来附加标签，我尝试按照上述方法但没有帮助。是否有角度的方式来执行预期的结果？

Answer 1

我发现您采用的方法存在一些问题，即声明一个

const span1 = "<span class='mytooltip ico-help fa fa-question-circle'>";

它不会帮助您创建 HTML 标记。它只是一个简单的字符串，没有别的。

您可以尝试以下方法：

首先识别你的'div'标签，它包含标题：

<div #header1>Header </div>

一旦你有了它，你需要做的就是使用“@ViewChild”在你的 TypeScript 文件中读取这个元素，如下所示：

@ViewChild('header1') d1: ElementRef;

@ViewChild 是一种优雅的打字稿方式，可以从代码中获取任何 html dom 并在您的代码中使用它。
完成在代码中获取元素后，您需要做的就是将代码附加到此，如下所示：

this.d1.nativeElement.insertAdjacentHTML('beforeend', '<span>Some value</span>');