Angular2 바디 태그에 클래스 추가

Angular2 바디 태그에 클래스 추가

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

렌더러를 사용해 봤는데 몸 전체가 변합니다.

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

나는 큰 angular2 앱을 작업 중이고 루트 선택기를 변경하면 많은 코드에 영향을 미칠 것이고, 나는 많은 코드를 변경해야 할 것입니다.

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

동적으로 작성된 모달 구성 요소를 열 때 문서 스크롤 막대를 숨기려고 합니다.

저는 논평하고 싶습니다.하지만 평판이 좋지 않아서 답장을 씁니다.저는 이 문제를 해결할 두 가지 가능성을 알고 있습니다.

1. 전역 문서를 주입합니다.네이티브 스크립트 등이 이를 지원하는지 모르기 때문에 최선의 방법은 아닐 수 있습니다.하지만 적어도 순수한 JS를 사용하는 것보다는 낫습니다.

constructor(@Inject(DOCUMENT) private document: Document) {}

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

글쎄요, 어쩌면 훨씬 더 나을 수도 있습니다.렌더러 주문자 2(NG4에 있음)를 주입하고 렌더러와 함께 클래스를 추가할 수 있습니다.

export class myModalComponent implements OnDestroy {

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

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

각도 4에 대한 편집:

import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myModalComponent implements OnDestroy {

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

  ngOnDestroy(): void {
    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');
    }
}

언급URL : https://stackoverflow.com/questions/43542373/angular2-add-class-to-body-tag