Angular2将类添加到body标签

2 回答

• 107

  我认为最好的方法是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');
      }
  }
  

  回复于 2024-04-26T22:09:13+08:00
• 3

  我很乐意发表评论 . 但由于缺少声誉，我写了一个答案 . 我知道解决这个问题的两种可能性 .

  • 注入全局文档 . 好吧，这可能不是最好的做法，因为我不知道nativescript等是否支持 . 但它至少比使用纯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() {
      this.renderer.setElementClass(document.body, 'modal-open', false);
    }
  

  EDIT FOR ANGULAR4:

  import { Component, OnDestroy, Renderer2 } from '@angular/core';
  
  export class myModalComponent implements OnDestroy {
  
    constructor(private renderer: Renderer2) {
      this.renderer.addClass(document.body, 'modal-open');
     }
  
    ngOnDestroy() {
      this.renderer.removeClass(document.body, 'modal-open');
    }
  

  回复于 2024-04-26T22:09:13+08:00