Angular2 додати клас до тегу body

Як я можу додати клас до тегу body, не роблячи тіло селектором програми та не використовуючи прив'язку хоста?

Я спробував використовувати Renderer, але це змінює все тіло

Клас прив'язки Angular 2.x на тезі body

Я працюю над великим angular2 додатком і зміна коректора вибору буде впливати на багато коду, мені доведеться змінити багато коду

Мій варіант використання такий:

Коли я відкриваю модальний компонент (створюється динамічно), я хочу, щоб смужка прокрутки документа ховалася

Я хотів би прокоментувати. Але через відсутність репутації я пишу відповідь. Я знаю дві можливості вирішити це питання.

1. Введіть глобальний документ. Що ж, це може бути не найкращою практикою, оскільки я не знаю, чи підтримує Nativecript тощо. Але це принаймні краще, ніж використовувати чистий JS.

конструктор (@Inject (ДОКУМЕНТ) приватний документ: документ) {}

ngOnInit () {
   this.document.body.classList.add ('тест');
}

Ну і, можливо, навіть краще. Ви можете ввести рендерінга чи рендерінга 2 (на NG4) та додати клас із рендерінгом.

клас експорту myModalComponent реалізує OnDestroy {

  конструктор (приватний візуалізатор: візуалізатор) {
    this.renderer.setElementClass (document.body, 'modal-open', правда);
   }

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

РЕДАКЦІЯ ДЛЯ ANGULAR4:

імпорт {Component, OnDestroy, Renderer2} з '@ angular / core';

клас експорту myModalComponent реалізує OnDestroy {

  конструктор (приватний візуатор: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

Я думаю, що найкращим способом це є поєднання обох підходів, описаних вище DaniS: використання візуалізатора для фактичного встановлення / видалення класу, а також використання інжектора документів, тому він не сильно залежить від, window.documentале що його можна динамічно замінити (наприклад, при візуалізації на стороні сервера). Отже весь код виглядатиме так:

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