Angular2 menambahkan kelas ke tag tubuh

Bagaimana cara menambahkan kelas ke tag body tanpa menjadikan body sebagai pemilih aplikasi dan menggunakan pengikatan host?

Saya mencoba menggunakan Renderer tetapi mengubah seluruh tubuh

Angular 2.x mengikat kelas pada tag tubuh

Saya sedang mengerjakan aplikasi angular2 besar dan mengubah pemilih root akan memengaruhi banyak kode, saya harus mengubah banyak kode

Kasus penggunaan saya adalah ini:

Ketika saya membuka komponen modal (dibuat secara dinamis), saya ingin menyembunyikan bilah gulir dokumen

Saya ingin berkomentar. Tetapi karena reputasi yang hilang saya menulis jawaban. Saya tahu dua kemungkinan untuk menyelesaikan masalah ini.

1. Masukkan Dokumen Global. Yah itu mungkin bukan praktik terbaik karena saya tidak tahu apakah nativescript dll mendukungnya. Tapi setidaknya lebih baik daripada menggunakan JS murni.

konstruktor (@Inject (DOKUMEN) dokumen pribadi: Dokumen) {}

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

Yah dan mungkin lebih baik. Anda bisa menyuntikkan perender atau perender 2 (pada NG4) dan menambahkan kelas dengan perender.

kelas ekspor myModalComponent mengimplementasikan OnDestroy {

  konstruktor (perender pribadi: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

EDIT UNTUK ANGULAR4:

impor {Komponen, OnDestroy, Renderer2} dari '@ angular / core';

kelas ekspor myModalComponent mengimplementasikan OnDestroy {

  konstruktor (perender pribadi: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

Saya pikir cara terbaik untuk melakukannya adalah kombinasi dari kedua pendekatan oleh DaniS di atas: Menggunakan penyaji untuk benar-benar mengatur / menghapus kelas, tetapi juga menggunakan injektor dokumen, jadi tidak terlalu bergantung pada window.documenttetapi itu dapat diganti secara dinamis (misalnya, saat merender sisi server). Jadi seluruh kode akan terlihat seperti ini:

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