Angular 4
大家好。我在一个大型 Angular4 应用程序中有一个页面,需要具有与应用程序其余部分不同的正文 CSS。
我不想设置 ViewEncapsulation.None,因为它只是需要受到影响的一个组件。
我可以以某种方式使用 :host()、:host-context() 或::ng-deep 来选择正文并应用 css 规则吗?如果是的话请问怎么办?如果没有,还有其他方法可以实现吗?
谢谢!
最佳答案
非常感谢你们俩。 @Palpatine1991,您问我为什么要访问 <body>
DOM 元素。这是因为我的应用程序中有一个页面是一款在移动设备上玩的全屏游戏,并且其中具有拖放功能。在 iOS 上,Safari 中存在的“弹跳”效果使拖放体验非常差。所以我想将以下 css 添加到该单个页面的 body 和 html DOM 元素中,从而抑制反弹效果。:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
我查看了您提供的解决方案(谢谢!)并采用了以下解决方案:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
这似乎有效。
谢谢:)
关于css - 从 Angular 组件内更改 body css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52279998/