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

在Angular 2中为动态创建的DOM附加HTML标记

1 个答案: