내가 클래스 이름을 사용하여 액세스 할 수있는 방법에 동적 각도 2

Question

에서 DOM을 생성 된 HTML 태그 내가 동적으로 생성되는 테이블 헤더가를 추가하고 순수한 각도 방법

을하기 전에 그와 함께 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

나는 그것은 당신이 HTML 태그를 생성 도움이되지 않습니다 즉

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

를 선언, 당신이 가지고 간 접근 방식에 몇 가지 문제를 참조하십시오. 그것은 단순한 문자열 일뿐입니다. 여기

당신이 시도 할 것입니다 :

헤더를 들고 당신의 'DIV'태그가 먼저 ID : 당신은 그것을 일단

<div #header1>Header </div> 

, 당신이해야 할 모든이 요소를 읽어 아래와 같이 '@ViewChild'를 사용하면 타이프 파일 :

@ViewChild('header1') d1: ElementRef; 

@ViewChild 코드에서 모든 HTML DOM을 얻고 코드에서 사용할 수있는 우아한 타이프 라이터의 방법입니다. 코드에서 요소를 얻고으로 수행되면
, 당신이해야 할 일은 다음과 같이 여기에 코드를 추가 할 수 있습니다 :의 HTML에 지시 관련되는 방법

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