Angular2 adiciona classe à tag do corpo

Como posso adicionar uma classe à tag do corpo sem tornar o corpo como o seletor de aplicativo e usando a vinculação do host?

Eu tentei usar o Renderer, mas mudou todo o corpo

Classe de vinculação Angular 2.x na tag do corpo

Estou trabalhando em um grande aplicativo angular2 e alterar o seletor de raiz impactará muito código, terei que alterar muito código

Meu caso de uso é este:

Quando eu abro um componente modal (criado dinamicamente), quero que a barra de rolagem do documento oculte

Eu adoraria comentar. Mas devido à falta de reputação, escrevo uma resposta. Bem, eu conheço duas possibilidades para resolver esse problema.

1. Injete o documento global. Bem, pode não ser a melhor prática, pois não sei se o nativescript etc suporta isso. Mas é pelo menos melhor do que usar JS puro.

construtor (@Inject (DOCUMENT) documento privado: Documento) {}

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

Bem e talvez até melhor. Você pode injetar o renderizador ou o renderizador 2 (no NG4) e adicionar a classe com o renderizador.

export class myModalComponent implementa OnDestroy {

  construtor (renderizador privado: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

EDITAR PARA ANGULAR4:

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

export class myModalComponent implementa OnDestroy {

  construtor (renderizador privado: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

Acho que a melhor maneira de fazer isso é uma combinação de ambas as abordagens do DaniS acima: usando o renderizador para realmente definir / remover a classe, mas também usando o injetor de documentos, por isso não é fortemente dependente do, window.documentmas pode ser substituído dinamicamente (por exemplo, ao renderizar do lado do servidor). Portanto, todo o código ficaria assim:

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