CSS 造型 Angular 2+（屁股疼）

Question

好的，我是 Angular 的新手 4. 我在正确设置应用程序样式方面遇到问题。我继续向 body 添加了一个 background image，这按预期工作，然后添加了一个显示内容的组件，它看起来符合预期。

我添加了第二个组件不同的路线但是对于这个我不希望body有background image在这一点上我不确定什么是最佳实践。

我读了几篇文章，有人说你可以通过在 styleUrls 中添加 body style override 来在组件级别为 body 设置不同的 style .我这样做了，但每次我从说 /myroute/page2 到 myroute/page1 时，背景都会坚持我为 myroute/page2 设置的内容，而它应该显示 /myroute/page1 的 body 图像.我还使用 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 删除它更好的修复方法？最佳做法是什么？

Answer 1

这对我有用，请试试。在您的组件 1 中，

ngOnInit() {
    document.body.style.background="url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSu5rIAFQkkswZLuwAUCXZqc_8bBROGkGgmZP5bmGk57sRKXWJMEg)";
}

ngOnDestroy() {
  document.body.style.background="";
}

在你的 component2 中，

ngOnInit() {
    document.body.style.background="url(http://gkreading.com/wp-content/uploads/2017/03/awesome-kid-in-the-grass.jpg)";
}
ngOnDestroy() {
      document.body.style.background="";
}

希望对您有所帮助。

Answer 2

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

constructor(private renderer: Renderer2) {
   }

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

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

CSS 造型 Angular 2+（屁股疼）

CSS Styling Angular 2+ (pain in the butt)

css

typescript

angular2-routing

angular