Question

首先请问我糟糕的英语

我对呈现的HTML有问题。我尝试将课程应用于身体

我读了这篇帖子How to add class to <body> in Angular Universal?
我可以使用this.renderer.setStyle(document.body, 'overflow','hidden');来应用样式，但是我不知道为什么它不能与addclass一起使用

constructor( @Inject(DOCUMENT) private document: Document, 
private modalService: ModalService, private el: ElementRef, 
private renderer: Renderer2) {
}
open(): void {
   this.element.style.display = 'block';
   this.renderer.addClass(this.document.body, 'ngx-utilitario-modal-open');
   // this.renderer.setStyle(document.body, 'overflow','hidden');
   console.log('fasd')
 }

 // close modal
 close(): void {
   this.element.style.display = 'none';
   this.renderer.removeClass(this.document.body, 'ngx-utilitario-modal-open' )
   // this.renderer.setStyle(document.body, 'overflow', 'auto' )
 }

我明白了

<body class="ngx-utilitario-modal-open">

但样式不适用我尝试

<div _ngcontent-cvu-c6="" class="ngx-utilitario-modal-open"></div>

和这项工作

Answer 1

将样式移至styles.scss或styles.css，该样式会全局应用

styles.scss

.ngx-utilitario-modal-open {
}

Answer 2

使用此代码。

encapsulation: ViewEncapsulation.None.

无表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这基本上与将组件的样式粘贴到HTML中相同。

角度：我可以将类添加到主体，但不能应用样式

2 个答案: