css - 从 Angular 组件内更改 body css

标签 css angular

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/

相关文章:

html - 悬停时更改div中文本的颜色? - CSS

html - 父 DIV 内的 2 个 DIVS

html - 基础图标字体 :hover styling not working, sass/css

angular - 尝试使用 SafePipe 清理嵌入的 Youtube 视频时出错

angular - 将查询参数从 Angular 中的父路由组件添加到当前子路由

javascript - 如何使用三元运算符在 ng 类中处理超过 2 个案例?

html - CSS: anchor 和按钮的垂直对齐文本

angular - 如何使用 Angular Material 6 自动完成数据服务器

angular - ag-grid API 在 Angular 单元测试中未定义

Angular2 在 http 响应上启用/禁用 formcontrol 不起作用