Angular2 fügt dem Body-Tag eine Klasse hinzu

Wie kann ich dem Body- Tag eine Klasse hinzufügen, ohne den Body als App-Selektor festzulegen und die Host-Bindung zu verwenden?

Ich habe versucht, den Renderer zu verwenden, aber er verändert den ganzen Körper

Angular 2.x-Bindungsklasse für Body-Tag

Ich arbeite an einer großen Angular2-App und das Ändern des Root-Selektors wirkt sich auf viel Code aus. Ich muss viel Code ändern

Mein Anwendungsfall ist folgender:

Wenn ich eine modale Komponente öffne (dynamisch erstellt), soll die Dokument-Bildlaufleiste ausgeblendet werden

Ich würde gerne einen Kommentar abgeben. Aber wegen fehlenden Rufs schreibe ich eine Antwort. Nun, ich kenne zwei Möglichkeiten, um dieses Problem zu lösen.

1. Injizieren Sie das globale Dokument. Nun, es ist möglicherweise nicht die beste Vorgehensweise, da ich nicht weiß, ob Nativescript usw. dies unterstützt. Aber es ist zumindest besser als reines JS zu verwenden.

Konstruktor (@Inject (DOCUMENT) privates Dokument: Dokument) {}

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

Gut und vielleicht sogar noch besser. Sie können den Renderer oder Renderer 2 (auf NG4) einfügen und die Klasse mit dem Renderer hinzufügen.

Exportklasse myModalComponent implementiert OnDestroy {

  Konstruktor (privater Renderer: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }}

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

BEARBEITEN FÜR ANGULAR4:

{Component, OnDestroy, Renderer2} aus '@ angle / core' importieren;

Exportklasse myModalComponent implementiert OnDestroy {

  Konstruktor (privater Renderer: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }}

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

Ich denke, der beste Weg, dies zu tun, ist eine Kombination beider Ansätze von DaniS oben: Verwenden des Renderers zum tatsächlichen Festlegen / Entfernen der Klasse, aber auch Verwenden des Dokumentinjektors, sodass es nicht stark von dem abhängt, window.documentsondern dynamisch ersetzt werden kann (zB beim Rendern serverseitig). Der gesamte Code würde also so aussehen:

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');
    }
}