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

发布时间：2020-12-17 17:51:56 所属栏目：安全来源：网络整理

导读：我有一个附加元素的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,如下

我有一个附加元素的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？我唯一的要求是动态构建一个元素,并使用该指令将其附加到元素.

解决方法

使用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,因此在某种程度上它是一种独立于平台的方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!