Question

使用background-color:red写入其scss中的home组件，然后将background-color:green写入其scss中的用户组件。我启动我的应用程序，我在家里，有红色背景，转到用户页面，有绿色背景。可以正常工作...但是现在当我回去时，我的家庭组件背景仍然是绿色。所有组件都具有ViewEncapsulation.None。如果我从用户页面开始导航，也会发生相同的情况，但是背景颜色为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() {

    }

}

编辑：您看到我的问题是我为<body>设置了背景颜色，但是模板的主体部分却不存在，这就是encapsulation: ViewEncapsulation.Emulated和组件样式表没有影响它的原因。

Answer 1

您需要将视图封装为 Emulated ，以便您的组件装饰器将如下所示-

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

它将仅将样式范围限制为特定组件。

Here 关于View Encapsulation的更多参考

Answer 2

它永远不会变回预期颜色的原因。

因为第一个组件将其css加载到dom中并永久保留直到窗口未关闭。以及第二次更改路线的原因是正确的，因为它将覆盖您第二次更改时已存在的相同类，id或标记样式组件已呈现。

所以我的建议是，利用路由器事件并检测要更改颜色和更改主体元素类的每条路径。

示例：

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：

https://stackblitz.com/edit/angular-svktf1

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

2 个答案: