Question

我在index.html中有这个：

<body class="light-gray">
    <app-root></app-root>
    <div id="preloader">
        <div></div>
    </div>
</body>

在app-root中我有这个：

<laylout></laylout>

内部布局我有一个组件，其中scss我想在索引上更改正文。任何建议我怎么能这样做？

.light-gray{
    background: red!important;
}

我尝试了:host，但这不是主要的父母我需要的东西：:host :host :host。主持人主持人：）

Answer 1

使用:: ng-deep，如下所示：

<强> CSS

::ng-deep .light-gray{
  background-color: red;
}

DEMO

使用ViewEncapsutation.None：

<强> CSS

.light-gray{
    background-color:red
}

<强>类：

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation: ViewEncapsulation.None

DEMO

Answer 2

这将使其有效

if (words.Any(x=>string.Equals(x, "blue"))) {

Answer 3

为了稍微扩展一点，“视图封装”是默认设置，它使用额外的选择器将视图中定义的所有CSS封装起来，这些选择器将其限制为仅在视图的基础对象中应用。

通过在该视图中的标签中添加属性（通常为_ng_content- *），然后修改所有附加到该视图的嵌入式CSS来添加条件，来做到这一点（从内存中-可能并不完全正确）。 [_ng_content-*]

例如，启用了视图封装的视图可能被分配了属性“ _ng_content-c2”。因此，如果它的html是

<div class='mydiv'></div>

它将呈现为

<div _ng_content-c2 class='mydiv'></div>

以及该视图的css是否具有

div.mydiv {color:black}

然后将div的样式块设置为

div.mydiv[_ng_content-c2] {color:black}

因此，如果您添加正文CSS条目

body {color:black}

它呈现为

body[_ng_content-c3] {color:black}

因此避免实际更改您的身体标签（因为您的身体标签没有该属性）

视图封装对于允许在对象中使用干净的类名而不用担心名称空间冲突非常有用。对于无法确定您的类名未在其他地方使用的共享组件尤其重要。

另一方面，它使许多标准CSS变得困难或不可能。

我个人只是不使用它，而是倾向于在整个文档中使用单个中央css文件，但是我不建议这样做是最佳做法。

对于那些感兴趣的人，这是视图封装的问题之一... 如果您在另一个封装视图中有一个封装视图，则外部视图CSS不可能控制内部视图，因为它将内部属性包装CSS，但是内部视图中的项目将具有内部属性。

对此进行角度修正（但我不确定其后果）的可能解决方法是，内部视图应既具有其父属性又具有其自身的属性。尽管随着视图堆栈的增加，这将变得很丑。

我希望看到的另一个功能是将CSS项标记为不封装或仅“基本封装”的方式（也就是说，仅检查它们的封装存在于CSS所在的基本对象中），而不是它们本身是在基础对象中创建的。这样，您就可以像这样使用CSS ...

div.taginbase {}
@noEncaps body {}
@baseEncaps div.taginchild

，这将在样式标签中呈现为

div.taginbase[_ng_content_c] {}
body {}
[_ng_content_c] div.taginchild

然后，这将允许视图定义视图封装的子视图的特定（和上下文感知）样式。

Answer 4

给你的身体一个 ID。在全局 styles.css 或 styles.scss 中定义要由特定组件使用的 CSS 类。然后确保您的组件实现了 AfterViewInit 和 OnDestroy。

在这些接口所需的函数里面放：

ngAfterViewInit(): void {
    document.getElementById("my-body-id").classList.add("specific-class");
}

ngOnDestroy(): void {
    document.getElementById("my-body-id").classList.remove("specific-class");
}

如何更改子组件的标记样式？

4 个答案: