을 어떻게 추가할 수 있습니class※*신체태그를 만들지 않고체**응용 프로그램 선택 및 사용하는 호스트합니다.
나를 사용하여 렌더러 하지만 그것을 변경 몸 전체
https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag
나는'm 업 angular2 앱을 변경하는 루트를 선택 영향을 미칠 것,코드가 많이 나는 것을 변경하는 많은 코드
내가 사용하는 경우가 this:
을 열 때 나는 모달 구성 요소(동적으로 만들어)나는 원하는 문서의 스크롤바를 숨기기
내가 사랑하는 것이다. 그러나 누락으로 인한 명성을 쓰는 대답이다. 잘 나가 알고 있는 두 가지 가능성이 이 문제를 해결하기 위해.
<전> constructor(@Inject(DOCUMENT)개인 document:Document){}
ngOnInit(){ 다.문서입니다.체.classList.추가('시험'); }
</전>
라 및 아마도 더 나은입니다. 수입 렌더러나 렌더러 2(에 NG4)및 추가의 클래스 renderer.
<전> 수출 클래스 myModalComponent 구현 OnDestroy{
생성자(개인 renderer:Renderer){ 다.renderer.setElementClass(문서입니다.몸'modal-열리는',true); }
ngOnDestroy(){ 다.renderer.setElementClass(문서입니다.몸'modal-열리는',false); } </전>
편집 ANGULAR4: <전> 가져오기{구성 요소,OnDestroy,Renderer2}에서'@angular/핵심';
수출 클래스 myModalComponent 구현 OnDestroy{
생성자(개인 renderer:Renderer2){ 다.renderer.addClass(문서입니다.몸'modal-열리는'); }
ngOnDestroy(){ 다.renderer.removeClass(문서입니다.몸'modal-열리는'); } </전>
나는 생각은 그것을 할 수있는 최선의 방법은 두 가지 접근법의 조합에 의해 DaniS 위를 사용하여 렌더러를 실제로 설정/삭제 클래스고,또한 사용하여 문서를 인젝터,그래서 그것은 강하게 의존하는창입니다.문서
그러나 교체할 수 있는 동적으로(예를 들어 렌더링할 때 server-side). 그래서 전체적인 코드는 다음과 같이 보일 것입니다.
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');
}
}