Angular2는 본문 태그에 클래스 추가

본문 을 앱 선택기로 만들고 호스트 바인딩을 사용 하지 않고 본문 태그에 클래스 를 추가하려면 어떻게 해야합니까?

렌더러를 사용해 보았지만 몸 전체가 바뀝니다

본문 태그의 Angular 2.x 바인드 클래스

저는 큰 angular2 앱에서 작업 중이며 루트 선택기를 변경하면 많은 코드에 영향을 미치므로 많은 코드를 변경해야합니다.

내 사용 사례는 다음과 같습니다.

모달 구성 요소 (동적으로 생성됨)를 열 때 문서 스크롤 막대를 숨기고 싶습니다.

나는 논평하고 싶다. 하지만 평판이 없어서 답을 씁니다. 저는이 문제를 해결할 수있는 두 가지 가능성을 알고 있습니다.

1. 글로벌 문서를 삽입하십시오. nativescript 등이 지원하는지 모르겠 기 때문에 모범 사례가 아닐 수도 있습니다. 그러나 적어도 순수한 JS를 사용하는 것보다 낫습니다.

constructor (@Inject (DOCUMENT) 비공개 문서 : 문서) {}

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

음, 아마도 더 좋을 것입니다. 렌더러 또는 렌더러 2 (NG4)를 삽입하고 렌더러와 함께 클래스를 추가 할 수 있습니다.

내보내기 클래스 myModalComponent 구현 OnDestroy {

  constructor (private renderer : Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

ANGULAR4 편집 :

'@ angular / core'에서 {Component, OnDestroy, Renderer2} 가져 오기;

내보내기 클래스 myModalComponent 구현 OnDestroy {

  constructor (private renderer : Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

이를 수행하는 가장 좋은 방법은 위의 DaniS의 두 가지 접근 방식의 조합이라고 생각합니다. 렌더러를 사용하여 실제로 클래스를 설정 / 제거하고 문서 주입기를 사용하므로에 크게 의존 window.document하지는 않지만 동적으로 교체 할 수 있습니다. (예 : 서버 측 렌더링시). 따라서 전체 코드는 다음과 같습니다.

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