题 Angular2将类添加到body标签


我怎样才能添加一个  到了 身体 标签没有制作 身体 作为应用程序选择器和使用主机绑定?

我尝试使用渲染器,但它改变了整个身体

Angular 2.x在body标签上绑定类

我正在开发一个大的angular2应用程序并且更改根选择器会影响很多代码,我将不得不改变很多代码

我的用例是这样的:

当我打开一个模态组件(动态创建)时,我想要隐藏文档滚动条


40
2018-04-21 12:09


起源


实际上如果你在html页面中使用js有什么问题 document.body.className|classList? - yurzui
哈哈,如果只是那么简单:)但直接访问dom是一个不好的做法 - Rachid Oussanaa
你可以编写一个大的包装器,它将在几秒钟后执行,并在最后添加 class 至 body。如果您不打算使用服务器渲染或Web工作者,您会害怕什么? - yurzui
所以没有比这更好的解决方案了吗? - Rachid Oussanaa
我无法理解这些因为没有正当理由而贬低和关闭问题的辱骂者 - Rachid Oussanaa


答案:


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

  1. 注入全局文档。好吧,它可能不是最好的做法,因为我不知道nativescript等是否支持。但它至少比使用纯JS更好。
构造函数(@Inject(DOCUMENT)私有文档:Document){}

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

好吧,甚至可能更好。您可以注入渲染器或渲染器2(在NG4上)并使用渲染器添加类。

导出类myModalComponent实现OnDestroy {

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

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

编辑ANGULAR4:

导出类myModalComponent实现OnDestroy {

  构造函数(private renderer:Renderer2){
    this.renderer.addClass(document.body,'modal-open');
   }

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

83
2018-04-21 21:37



谢谢你的回复,我认为使用rendrer是最好的解决方案 - Rachid Oussanaa
如果有人想知道在哪里获得DOCUMENT,那就是: import { DOCUMENT } from '@angular/platform-browser' - Neph
渲染器解决方案要好得多。在Angular 4中,Renderer已被弃用并替换为Renderer2。代码必须更改为: this.renderer.addClass(document.body, 'modal-open');  和 this.renderer.removeClass(document.body, 'modal-open'); - GreyBeardedGeek
也, @Inject(DOCUMENT) 在构造函数中不再需要 - GreyBeardedGeek
作为@Neph的更新:不推荐从平台浏览器导入DOCUMENT。请改用@ angular / common。 - Pieter De Bie