如何从 Angular 2 中的指令附加动态 DOM 元素？

Question

我有一个附加元素的 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官方文档中的这句话：

Use this API as the last resource when direct access to DOM is needed.

我的问题是 - 如何正确地将此指令迁移到 Angular 2？我唯一的要求是动态构建一个元素并使用指令将其附加到元素。

Answer 1

使用Angular提供的Renderer操作DOM:

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

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

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

这不像 appendChild() 那样依赖于本机 DOM API，因此在某种程度上它是一种独立于平台的方法。

如何从 Angular 2 中的指令附加动态 DOM 元素？

How to append dynamic DOM elements from a directive in Angular 2?

angular2-directives

angular