Angular2 добавить класс в тег тела

Как я могу добавить класс в тег тела, не используя тело в качестве селектора приложения и используя привязку хоста?

Я пробовал использовать Renderer, но он меняет все тело

Angular 2.x класс привязки к тегу body

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

Мой вариант использования таков:

Когда я открываю модальный компонент (созданный динамически), я хочу, чтобы полоса прокрутки документа скрывала

Я хотел бы прокомментировать. Но из-за пропавшей репутации пишу ответ. Я знаю две возможности решить эту проблему.

1. Внедрить глобальный документ. Что ж, это может быть не лучшая практика, поскольку я не знаю, поддерживает ли это nativescript и т. Д. Но это как минимум лучше, чем использовать чистый JS.

constructor (@Inject (DOCUMENT) закрытый документ: Document) {}

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

Ну а может даже лучше. Вы можете внедрить рендерер или рендерер 2 (на NG4) и добавить класс с рендерером.

класс экспорта myModalComponent реализует OnDestroy {

  конструктор (частный рендерер: рендерер) {
    this.renderer.setElementClass (document.body, 'модально-открытый', истина);
   }

  ngOnDestroy () {
    this.renderer.setElementClass (document.body, 'модальное открытие', ложь);
  }

РЕДАКТИРОВАТЬ ДЛЯ ANGULAR4:

импортировать {Component, OnDestroy, Renderer2} из '@ angular / core';

класс экспорта myModalComponent реализует OnDestroy {

  конструктор (частный рендерер: Renderer2) {
    this.renderer.addClass (document.body, 'модально-открытый');
   }

  ngOnDestroy () {
    this.renderer.removeClass (document.body, 'модально-открытый');
  }

Я думаю, что лучший способ сделать это - это комбинация обоих подходов 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');
    }
}