Angular 样式未应用于组件(尽管使用了主机选择器)

Question

我的 Angular 项目中的组件样式有问题。我基本上无法让它工作。为了解释我的问题，我使用 Angular CLI(CLI 6.0.8，angular 6.1.0)创建了一个新项目。我马上创建了一个新的测试组件，我在其中声明了以下内容:

- - - - - - - - - - - - - 
COMPONENT TEMPLATE FILE:
- - - - - - - - - - - - - 

<div>with div</div>
without div

- - - - - - - - - - - - - 
COMPONENT STYLE FILE:
- - - - - - - - - - - - - 

:host
{
  background-color: blue;
}

( typescript 声明文件没有变化)

我将这个组件包含在应用程序模板中，并在 app.css 文件中也为它声明了一些样式:

- - - - - - - - - - - - - 
APP TEMPLATE FILE:
- - - - - - - - - - - - - 

<app-test class='test'></app-test>

- - - - - - - - - - - - - 
APP STYLE FILE:
- - - - - - - - - - - - - 

.test
{
  background-color: red;
  width: 350px;
}

这是我得到的结果:

IMAGE : style does not apply correctly (background color applies to the free text only)

IMAGE : the width of the element is not updated and the element size is not shown as it usually is when using chrome

IMAGE : usually element sizes are highlighted in blue when shown

如图所示，样式应用不正确，无论是在父范围还是在组件范围(使用 :host)中定义。样式已更新但未显示。当我在浏览器中将“app-test”标签更改为“div”标签时(使用调试工具 > 编辑为 HTML)，它会正确显示:

IMAGE : changing the angular component tag into a div tag sorts the issue

我认为它与 Angular 显示组件的方式有关，因为将标签更改为 DIV 有效。但是我不明白这个问题是从哪里来的。此问题出现在使用 CLI 新创建的项目上，项目配置中没有任何配置...

谁能帮帮我？

Answer 1

关于您在测试组件中面临的宽度问题，假设您希望整个元素的宽度跨越 350px，您应该将其显示属性定义为 block:

:host {
  background: blue;
  display: block;
}

自定义元素没有默认显示属性，您的浏览器无法猜测您的意思。

关于在组件上应用 .test 样式，app-component 样式使用 _nghost-c0 和 封装_ng-content-c0 属性，因此未应用于 test.component。如果您想在其他组件上应用 .test，您可以在全局应用的全局 styles.css 文件上编写 CSS RULE :

//styles.css
.test {
  background-color: red;
  width: 350px;
}

或者像这样在您的@component 装饰器上使用viewEncapsulation 属性:

//app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

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

然后你可以在 app.component 文件中保留 CSS RULE

//app.component.css
.test {
  background-color: red;
  width: 350px;
}

但是现在那个文件里面的样式没有被封装，会渗透到其他组件中。