html - 如何使用 Angular 5 在每个页面显示不同的背景颜色？

Question

我是 Angular 新手，我需要更改 body 标签的 background-color。我在 Angular 中创建了一个包含多个页面的元素。

例如:

Login / Home / About / Service / Contact

我需要在每个页面上显示不同的background-color。

但实际上，body 标签对所有页面都是通用的，所以我无法更改 CSS 中的“背景色”？

Answer 1

您可以尝试在组件 ngOnInit 生命周期中更改它， 像这样

ngOnInit(){
    document.body.style.backgroundColor = 'red';
} 

在你的组件代码中

或者您也可以尝试更改 ViewEncapsulation，但它会针对所有组件样式更改它，因此它可能会给您带来意想不到的效果。

像这样

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

正如您在评论中所问，您也想编辑 body 类别，所以我认为您会选择我写的第一个选项。

根据您要处理的类的数量，它可能会有所不同。我只写一节课的例子

ngOnInit(){
  const body = document.body;
  body.className = '';
  body.classList.add('classname');
}

如果你需要处理更多的类，你将需要编辑你的代码，只删除你不需要的类，而不是所有的类