web-dev-qa-db-ja.com

Angular 2？のディレクティブから動的DOM要素を追加する方法

要素を追加するAngular 1.xディレクティブがあります。要するに：

app.directive('mydirective', function() {
  template: '<ng-transclude></ng-transclude>',
  link: function(el) {
    var child = angular.element("<div/>");
    el.append(child);
  }

このディレクティブをAngular 2に次のように移行できます。

@Directive({
  selector: '[mydirective']
})
export class MyDirective implements OnInit {
  constructor(private elementRef: ElementRef) { }

  ngOnit() {
    var child = angular.element("<div/>");
    this.elementRef.nativeElement.append(child);
  }
}

私を悩ませているのは、nativeElement公式ドキュメントのこの発言です：

DOMへの直接アクセスが必要な場合、このAPIを最後のリソースとして使用します。

私の質問は-このディレクティブをAngular 2に適切に移行するにはどうすればよいですか？私の唯一の要件は、要素を動的に構築し、ディレクティブで要素に追加することです。

angularangular2-directives
9
user11081980

DOMを操作するには、Angular=によって提供される Renderer を使用します。

_import { DOCUMENT } from '@angular/common';

export class MyDirective implements OnInit {
  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document) { }

  ngOnInit() {
    const child = document.createElement('div');
    this.renderer.appendChild(this.elementRef.nativeElement, child);
  }
}
_

これはappendChild()のようなネイティブDOM APIに依存しないため、ある意味ではプラットフォームに依存しないアプローチです。

14
Maxim Koretskyi