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

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;
}

（打字稿声明文件没有变化）

我将这个组件包含在应用模板中，并在 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

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

谁能帮帮我？

Answer 1

关于你在测试组件中面临的宽度问题，假设你希望整个元素跨越到 350px 的宽度，你应该定义它的 display 属性为 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
})

然后您可以将 CSS RULE 留在app.component 文件中

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

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

Answer 2

这是因为自定义组件（自定义 html 标签）被渲染为内联元素。

使用

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

它会起作用的。

https://stackblitz.com/edit/angular-hknw2a?file=src/app/app.component.scss

Answer 3

将您的孩子包裹在一个 div 中并将 css 应用到该 div

<div class="test">
  <app-child></app-child>
</div>