web-dev-qa-db-fra.com

Comment ajouter des éléments DOM dynamiques à partir d'une directive dans Angular 2?

J'ai une directive Angular 1.x qui ajoute un élément. En bref:

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

Je peux migrer cette directive vers Angular 2 comme ceci:

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

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

Ce qui me dérange, c'est cette remarque dans la documentation officielle de nativeElement:

Utilisez cette API comme dernière ressource lorsqu'un accès direct au DOM est nécessaire.

Ma question est - comment pourrais-je migrer correctement cette directive vers Angular 2? Ma seule exigence est de construire un élément dynamiquement et de l'ajouter à l'élément avec la directive.

angularangular2-directives
9
user11081980

Utilisez Renderer fourni par le Angular pour manipuler le 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);
  }
}

Cela ne dépend pas de l'API DOM native comme appendChild(), donc en quelque sorte, c'est une approche indépendante de la plateforme.

14
Maxim Koretskyi