Différence entre Renderer et ElementRef dans angular 2
Quelle est la différence entre Renderer et ElementRef? Dans Angular les deux sont utilisés pour la manipulation DOM. J'utilise actuellement ElementRef seul pour écrire Angular 2 directives. Si j'obtiens plus d'informations sur Renderer, je peux l'utiliser dans mes futures directives.
Renderer est une classe qui est une abstraction partielle sur le DOM. L'utilisation de Renderer pour manipuler le DOM ne rompt pas le rendu côté serveur ou les Web Workers (où l'accès direct au DOM se briserait).
ElementRef est une classe qui peut contenir une référence à un élément DOM. C'est encore une abstraction pour ne pas casser dans les environnements où les navigateurs DOM ne sont pas réellement disponibles.
Si ElementRef est injecté dans un composant, l'instance injectée est une référence à l'élément Host du composant actuel.
Il existe d'autres façons d'acquérir une instance ElementRef comme @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren(). Dans ce cas, ElementRef est une référence aux éléments correspondants dans le modèle ou les enfants.
Renderer et ElementRef ne sont pas "ceci ou cela", mais à la place ils doivent être utilisés ensemble pour obtenir une abstraction complète de la plateforme.
Renderer agit sur le DOM et ElementRef est une référence à un élément du DOM sur lequel Renderer agit.
Notez que vous devez vous abstenir d'utiliser ElementHref car il a signalé un risque de sécurité.
Documentation Angular 2:
"Autoriser l'accès direct au DOM peut rendre votre application plus vulnérable aux attaques XSS. Examinez attentivement toute utilisation d'ElementRef dans votre code. Pour plus de détails, consultez le Guide de sécurité."
"Utilisez cette API en dernier recours lorsqu'un accès direct au DOM est nécessaire. Utilisez les modèles et la liaison de données fournis par Angular à la place. Sinon, jetez un œil à Renderer qui fournit une API qui peut être en toute sécurité utilisé même lorsque l'accès direct aux éléments natifs n'est pas pris en charge. "