Angular 角度2+；：组件样式不断影响其他组件

将背景颜色为红色的主组件写入其SCS，然后将背景颜色为绿色的用户组件写入其SCS。我启动我的应用程序，我在家，有红色背景，进入用户页面，有绿色背景。像它应该的那样工作…但是现在当我回到家时，我的组件背景仍然是绿色的。所有组件都有

视图封装。无
。
若我从用户页面开始导航，同样的事情也会发生，但背景颜色是vica vera

我一直明白，组件样式的要点是只影响其组件，而不影响其他组件。这不应该是怎么回事吗

编辑：如果我设置了
ViewEncapsulation.Emulated
我看不到应用组件样式scss文件的样式，因此两个页面都有白色背景。
以下是我的主零部件文件的外观：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    encapsulation: ViewEncapsulation.Emulated,
})

export class HomeComponent implements OnInit {

    ngOnInit() {

    }

}

编辑：您可以看到我的问题是我为
设置了背景色，但主体不是模板的一部分，这就是为什么
封装：视图封装。模拟的
和组件样式表不会影响它。
您需要将视图封装为
模拟的
，因此，您的组件装饰器将如下所示-

@Component({
    // ...
    encapsulation: ViewEncapsulation.Emulated,
})

它将仅将样式范围限定到特定组件

有关视图封装的更多参考资料
它从未更改回预期颜色的原因

因为第一个组件将其css加载到dom中，并在窗口未关闭之前一直保持其css。第二次更改路线的原因是正确的，因为它将覆盖第二次更改后存在的相同类、ID或标记样式
组件被渲染

因此，我的建议是，使用路由器事件并检测您想要更改颜色和更改body元素类的每个路径

例如：

export class AppComponent {
  name = 'Angular';

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        console.log(event.url)
        if (event.url == '/') {
          document.body.className = 'home';
        } else if (event.url == '/test') {
          document.body.className = 'test';
        } else if (event.url == '/hello') {
          document.body.className = 'hello';
        }
      }
    });
  }
}

有关完整指南，请参见下面的stackblitz：

视图封装。None
字面意思是“不要孤立视图css”。你能在stackblitz/plnkr上重现你的问题吗？@TusharWalzade我想我已经解决了。问题是，我正在为body tag设置背景色，body tag不是主模板或用户模板的一部分，因此组件样式不适用于body。能否向我们显示一个scss文件？您使用了糟糕的设计，您会得到糟糕的结果。有很多方法可以设计
主体
，而不必考虑视图封装。如果您的样式冲突，请封装。如果没有应用您的样式，请检查变量名称。最后，如果您不知道如何使用Angular为主体设计样式，请提供一个示例，以便我们向您展示如何使用。
封装：viewEngularation.Emulated
与完全不编写相同。所以现在的情况是，主页和用户页都将有白色背景。