如何在 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官方文档中的这句话：

当需要直接访问 DOM 时，使用此 API 作为最后一个资源。

我的问题是 - 我怎样才能正确地将此指令迁移到 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，因此在某种程度上它是一种独立于平台的方法。