角度样式未应用于组件（尽管使用了主机选择器）

我的角度项目中的组件样式存在问题。我基本上无法让它工作。为了解释我的问题，我使用 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;
}

（没有更改打字稿声明文件）

我将此组件包含在应用程序模板中，并在 app.css 文件中为其声明一些样式：

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

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

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

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

这是我得到的结果：

IMAGE：样式未正确应用（背景颜色仅适用于自由文本） https://i.stack.imgur.com/ybTmu.png

IMAGE：元素的宽度未更新，并且元素大小未像使用 chrome 时通常那样显示 https://i.stack.imgur.com/aNW42.png

IMAGE：通常元素大小在显示时以蓝色突出显示 https://i.stack.imgur.com/Hf3rB.png

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

IMAGE ：将 Angular 组件标签更改为 div 标签可以解决问题 https://i.stack.imgur.com/KM9JQ.png

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

谁能帮我？

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

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

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

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

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

或使用viewEncapsulation您的财产@component装饰器是这样的：

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

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

然后你可以离开CSS RULE on the app.component file

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

但现在该文件中的样式没有被封装，并且会渗透到其他组件。