web-dev-qa-db-ja.com

ElementRef（nativeEelement）でHTMLコンテンツを設定するにはどうすればよいですか？

HTML要素の内容をディレクティブで設定したい。

export class AdvertisementDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
    el.nativeElement.content = '<p>Hello World<p>';
  }

}

しかし、それは機能せず、エラーも発生しません。

これを行う背後にある考え方は、ディレクティブにAdコードを含め、ディレクティブ属性を使用する場所に設定することです。広告のコードには、JavaScriptとHTMLコードが含まれています。

angularangular-directive
5
Maihan Nijat

次のように修正しました。

el.nativeElement.innerHTML = '<p>Hello World<p>';

nativeElementはネイティブHTML要素であるため、すべてのJavaScriptメソッドを受け入れる必要があることに気付きました。

0
Maihan Nijat

テキストの追加は、renderer2オブジェクトのcreateTextプロパティを使用して行うこともできます。

    import {ElementRef, ViewChild, Renderer2} from '@angular/core';


export class AdvertisementDirective {

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

  ngOnInit() {

   const text = this.renderer.createText('Hello World'); // <-- TO Be Noted
    this.renderer.appendChild(this.el.nativeElement, text);

  }

}
0
M Abdullah