Angular2 ajoute une classe à la balise body

Comment puis-je ajouter une classe à la balise body sans faire du corps le sélecteur d'application et utiliser la liaison d'hôte?

J'ai essayé d'utiliser le Renderer mais ça change tout le corps

Classe de liaison angulaire 2.x sur balise body

Je travaille sur une grande application angular2 et changer le sélecteur racine aura un impact sur beaucoup de code, je devrai changer beaucoup de code

Mon cas d'utilisation est le suivant:

Lorsque j'ouvre un composant modal (créé dynamiquement), je veux que la barre de défilement du document se masque

J'adorerais commenter. Mais à cause d'une réputation manquante, j'écris une réponse. Eh bien, je connais deux possibilités pour résoudre ce problème.

1. Injectez le document global. Eh bien, ce n'est peut-être pas la meilleure pratique car je ne sais pas si nativescript, etc. prend en charge cela. Mais c'est au moins mieux que d'utiliser du JS pur.

constructeur (@Inject (DOCUMENT) document privé: Document) {}

ngOnInit () {
   this.document.body.classList.add ('test');
}

Eh bien et peut-être même mieux. Vous pouvez injecter le moteur de rendu ou le moteur de rendu 2 (sur NG4) et ajouter la classe avec le moteur de rendu.

la classe d'exportation myModalComponent implémente OnDestroy {

  constructeur (moteur de rendu privé: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

  ngOnDestroy () {
    this.renderer.setElementClass (document.body, 'modal-open', false);
  }

MODIFIER POUR ANGULAIRE4:

import {Component, OnDestroy, Renderer2} depuis '@ angular / core';

la classe d'exportation myModalComponent implémente OnDestroy {

  constructeur (moteur de rendu privé: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

  ngOnDestroy () {
    this.renderer.removeClass (document.body, 'modal-open');
  }

Je pense que la meilleure façon de le faire est une combinaison des deux approches de DaniS ci-dessus: utiliser le moteur de rendu pour définir / supprimer la classe, mais aussi utiliser l'injecteur de document, de sorte qu'il ne dépend pas fortement du window.documentmais qui peut être remplacé dynamiquement (par exemple lors du rendu côté serveur). Donc, tout le code ressemblerait à ceci:

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@Component({ /* ... */ })
export class MyModalComponent implements OnInit, OnDestroy {
    constructor (
        @Inject(DOCUMENT) private document: Document,
        private renderer: Renderer2,
    ) { }

    ngOnInit(): void {
        this.renderer.addClass(this.document.body, 'embedded-body');
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body, 'embedded-body');
    }
}