Как я могу добавить класс к Корпус тег не делая корпус в качестве приложения селектора и с помощью узла привязки?
Я попытался с помощью визуализации, но она меняет все тело
https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag
Я'м работает на большой приложение angular2 и изменение корневой селектор влияет много кода, мне придется менять много кода
Мой случай использования-это:
Когда я открываю модальное компонент (динамически созданные) я хочу, чтобы полосы прокрутки документа для скрытия
Я хотел бы прокомментировать. Но из-за отсутствия репутации, я пишу ответ. Ну я знаю два варианта решения этой проблемы.
в <предварительно> конструктор(@впрыснуть(документ) отдельный документ: документа) {}
ngOnInit(){ это.документ.тела.classList.добавить('тест'); }
</пред>
Ну и, возможно, даже лучше. Можно придать визуализации или рендеринга 2 (на напрашивающееся ng4) и добавить класс с рендером.
в <предварительно> экспорт myModalComponent класс реализует OnDestroy {
конструктор(отдельный рендерер: рендер) { это.рендерер.setElementClass(документ.тело 'модал-открытые', истина); }
ngOnDestroy() { это.рендерер.setElementClass(документ.тело 'модал-открытые', ложь); } </пред>
РЕДАКТИРОВАТЬ ДЛЯ ANGULAR4: в <предварительно> импорт { компонент, OnDestroy, Renderer2 } с '@угловое/сердечник';
экспорт myModalComponent класс реализует OnDestroy {
конструктор(отдельный рендерер: Renderer2) { это.рендерер.добавление(документ.тело 'модал-открытые'); }
ngOnDestroy() { это.рендерер.removeClass(документ.тело 'модал-открытые'); } </пред>
Я думаю, что лучшим способом сделать это является сочетание обоих подходов Даниса выше: с помощью визуализации на самом деле установить / удалить класс, а также с помощью инжектора документ, поэтому он не сильно зависят от `окна.документа, но это может быть динамически заменен (например, при обработке на стороне сервера). Поэтому весь код будет выглядеть так:
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');
}
}