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

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

Я попытался с помощью визуализации, но она меняет все тело

https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag

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

Мой случай использования-это:

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

Sunil Garg
Редактировал вопрос 27-го марта 2018 в 12:25
Программирование
angular
21-го апреля 2017 в 12:09
17 просмотров
Комментарии к вопросу (9)
Решение

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

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

в <предварительно> конструктор(@впрыснуть(документ) отдельный документ: документа) {}

ngOnInit(){ это.документ.тела.classList.добавить('тест'); }

</пред>

Ну и, возможно, даже лучше. Можно придать визуализации или рендеринга 2 (на напрашивающееся ng4) и добавить класс с рендером.

в <предварительно> экспорт myModalComponent класс реализует OnDestroy {

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

ngOnDestroy() { это.рендерер.setElementClass(документ.тело 'модал-открытые', ложь); } </пред>

РЕДАКТИРОВАТЬ ДЛЯ ANGULAR4: в <предварительно> импорт { компонент, OnDestroy, Renderer2 } с '@угловое/сердечник';

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

конструктор(отдельный рендерер: Renderer2) { это.рендерер.добавление(документ.тело 'модал-открытые'); }

ngOnDestroy() { это.рендерер.removeClass(документ.тело 'модал-открытые'); } </пред>

Rachid Oussanaa
Редактировал ответ 8-го ноября 2018 в 11:00
Комментарии (11)

Я думаю, что лучшим способом сделать это является сочетание обоих подходов Даниса выше: с помощью визуализации на самом деле установить / удалить класс, а также с помощью инжектора документ, поэтому он не сильно зависят от `окна.документа, но это может быть динамически заменен (например, при обработке на стороне сервера). Поэтому весь код будет выглядеть так:

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');
    }
}
Комментарии (1)