gpt4 book ai didi

Angular 2+ : Component style keeps affecting other components

转载 作者:行者123 更新时间:2023-12-04 17:42:06 28 4
gpt4 key购买 nike

通过 background-color:red 获得主页组件写入其 scss,然后使用 background-color:green 获取用户组件写入它的 scss。我启动我的应用程序,我在家,背景是红色,转到用户页面,背景是绿色。像它应该的那样工作......但是现在当我返回时我的主页组件背景仍然是绿色的。所有组件都有 ViewEncapsulation.None .如果我从用户页面开始导航,会发生同样的事情,但背景颜色会变色。

我一直理解码件样式的意义在于只影响它的组件而不影响其他组件。这不是应该如何工作的吗?

编辑:如果我设置 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组件样式表不会影响它。

最佳答案

您需要将您的 View 封装到Emulated,这样您的组件装饰器将如下所示 -

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

它会将您的样式范围限定到特定组件。

Here 关于View封装的更多引用

关于 Angular 2+ : Component style keeps affecting other components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54020841/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com