Question

Angular4

大家好。我在一个大型Angular4应用程序中只有一个页面，该页面需要具有与应用程序其余部分不同的body CSS。

我不想设置ViewEncapsulation.None，因为它只是需要受影响的一个组件。

我可以通过某种方式使用：host（），：host-context（）或:: ng-deep来选择正文并应用CSS规则吗？如果是这样，那请如何？如果没有，还有其他方法可以实现吗？

谢谢！

Answer 1

非常感谢你们。 @ Palpatine1991，您询问为什么我要访问<body> DOM元素。这是因为我在应用程序中有一个页面，该页面是在移动设备上播放并具有拖放功能的全屏游戏。在iOS上，Safari中出现的“弹跳”效果使拖放体验非常差。因此，我想将以下css添加到该页面的正文和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');
  }

这似乎可行。

谢谢：）

Answer 2

如果CSS仅影响一个组件，为什么需要将CSS添加到<body>？

使用:host()会将样式应用于由组件的选择器选择的元素。
使用::ng-deep只能选择宿主元素下方的某个元素（但是<body>不在宿主下方！）

如何从具有ViewEncapsulation.Emulated的组件中更改主体的样式的唯一方法是使用Renderer2 API，但在我看来这是一个非常糟糕的做法

如果您需要覆盖组件的某些全局<body>样式，则可以使用:host-context来实现。此处的示例：https://stackblitz.com/edit/angular-material2-issue-oodjmm

从Angular组件中更改Body CSS

2 个答案: