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) { }

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

这并不依赖于appendChild()这样的原生DOM API，所以在某种程度上它是一种独立于平台的方法。

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

1 个答案: