角度样式未应用于组件(尽管使用了主机选择器) [英] angular style not applied on components (despite the use of host selectors)

问题描述

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

- - - - - - - - - - - - -组件模板文件:- - - - - - - - - - - - -<div>与 div</div>没有div- - - - - - - - - - - - -组件样式文件:- - - - - - - - - - - - -:主持人{背景颜色:蓝色；}

(打字稿声明文件没有变化)

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

- - - - - - - - - - - - -应用模板文件:- - - - - - - - - - - - -<app-test class='test'></app-test>- - - - - - - - - - - - -应用样式文件:- - - - - - - - - - - - -.测试{背景颜色:红色；宽度:350px；}

这是我得到的结果:

IMAGE:样式应用不正确(背景颜色仅适用于自由文本)

IMAGE : 元素的宽度没有更新，元素的大小没有像往常一样显示是在使用 chrome 时

IMAGE :通常元素大小在显示时以蓝色突出显示

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

IMAGE:将角度组件标签更改为 div 标签可以解决问题

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

有人可以帮我吗?

解决方案

关于你在测试组件中面临的宽度问题，假设你想让整个元素跨越到 350px 的宽度，你应该定义它的 display 属性来阻止:

:host {背景:蓝色；显示:块；}

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

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

//styles.css.测试 {背景颜色:红色；宽度:350px；}

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

//app.component.ts从@angular/core"导入 { Component, ViewEncapsulation };@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css'],封装:ViewEncapsulation.None})

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

//app.component.css.测试 {背景颜色:红色；宽度:350px；}

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

I have an issue with the styling of components in my angular projects. I can't get it to work basically. To explain my issue I created a new project using Angular CLI (CLI 6.0.8, angular 6.1.0). Right off the bate I create a new test component in which I declare the following things:

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

<div>with div</div>
without div

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

:host
{
  background-color: blue;
}

(no changes to the typescript declaration file)

I include this component in the app template, and declare some styling for it in the app.css file too:

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

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

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

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

This is the result I get:

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

As shown in the images, the styling is not applied correctly, whether it is defined in the parent scope or in the component scope (using :host). Styles are updated but not shown. When I change the 'app-test' tag into a 'div' tag in the browser (using the debug tools > edit as HTML), it is displayed correctly:

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

I reckon it has something to do with the way angular displays the component since changing the tag to a DIV works. But I don't understand where this problem comes from. This issue appears on a newly created project using CLI, without configuration anything in the project config...

Can anyone help me?

解决方案

About the width issue your facing in the test component, assuming you want the whole element to span to a width of 350px, you should define its display property to block:

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

Custom elements does not have a default display property and your browser can't guess what your means are.

About applying the .test style on your component, the app-component styles are encapsulated using the _nghost-c0 and _ng-content-c0 attributes and therefor not being applied on test.component. If you want to apply the .test on other components you can either write the CSS RULE on the global styles.css file which is applied globally:

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

or use the viewEncapsulation property on your @component decorator like this:

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

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

and then you can leave the CSS RULE on the app.component file

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

but now the styles in that file are not encapsulated and will penetrate other components.

这篇关于角度样式未应用于组件(尽管使用了主机选择器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！