Angular2 클래스를 추가 몸을 태그

을 어떻게 추가할 수 있습니class※*신체태그를 만들지 않고체**응용 프로그램 선택 및 사용하는 호스트합니다.

나를 사용하여 렌더러 하지만 그것을 변경 몸 전체

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

나는'm 업 angular2 앱을 변경하는 루트를 선택 영향을 미칠 것,코드가 많이 나는 것을 변경하는 많은 코드

내가 사용하는 경우가 this:

을 열 때 나는 모달 구성 요소(동적으로 만들어)나는 원하는 문서의 스크롤바를 숨기기

Sunil Garg
편집된 질문27일 3월 2018 в 12:25
프로그래밍
angular
21일 4월 2017 в 12:09
2 파운드
질문에 대한 의견 (9)
해결책

내가 사랑하는 것이다. 그러나 누락으로 인한 명성을 쓰는 대답이다. 잘 나가 알고 있는 두 가지 가능성이 이 문제를 해결하기 위해.

  1. 삽입 글로벌 문서입니다. 잘 되지 않을 수도 있습니다 최고의 연습으로 나가지 않't 알고 있는 경우 nativescript 등을 지원합니다. 하지만 그것은 적어도보다 더 나은 사용하여 순수한 JS.

<전> 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-열리는'); } </전>

Rachid Oussanaa
편집된 답변8일 11월 2018 в 11:00
해설 (11)

나는 생각은 그것을 할 수있는 최선의 방법은 두 가지 접근법의 조합에 의해 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');
    }
}
해설 (1)