css - CSS样式Angular 2+(对接疼痛)

好的，我是Angular 4的新手。我在正确设置应用程序样式时遇到问题。我继续向正文中添加background image，该效果可以按预期工作，然后添加了一个可以显示内容的组件，并且外观与预期的一样。

我添加了第二条不同的路线，但是对于这一条路线，我现在不希望身体具有background image，因此我不确定最佳做法是什么。

我读了几篇文章，有人说，通过在style中添加body style override，可以在组件级别为主体使用不同的styleUrls。我这样做了，但是每次我从说/myroute/page2到myroute/page1时，背景都坚持我为myroute/page2设置的背景，而背景应该显示/myroute/page1的身体图像。我也正在使用ViewEncapsulation设置为None（也许这是问题）？

这也是我的设置，也可能是错误的

index.html具有以下内容：

</head>
 <body>
   <app-root></app-root>
  </body>
</html>

然后我的app.component.html有这个：

<app-navigation></app-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>

然后我有我的welcome.component.html有一部分

<section id="hero">
  <div>
  </div>
</section>

现在上面的组件正确显示了背景设置，但是如果我使用类似

 this.router.navigate(['/page2']);

背景与我的欢迎组件相同。如果我在/page2上刷新，则会显示正确的背景。

更新：
好的，我放弃了在第二个组件上显示背景的操作，我希望没有背景图像，但希望将其保留在第一个组件中。因此，我从所有视图中都删除了ViewEncapsulation，但是现在如果将body {}移到第一个组件，则由于某种原因它不会显示它（我确保它具有正确的路径）。是否有比使用DOM删除更好的解决方案？最佳做法是什么？

最佳答案

您需要在ngOnInit上设置样式类，并在ngOnDestroy上将其删除。

constructor(private renderer: Renderer2) {
   }

ngOnInit() {
    this.renderer.addClass(document.body, 'your_class');
  }

ngOnDestroy() {
    this.renderer.removeClass(document.body, 'your_class');
  }

myRoute

css - CSS样式Angular 2+(对接疼痛)