角组件默认样式CSS显示块 [英] Angular component default style css display block

问题描述

我讨厌所有的角度元素都是0x0像素，因为它们具有诸如app-card，app-accordion之类的名称，浏览器无法识别它们为HTML5兼容元素，因此不会提供任何默认样式.

这意味着在Chrome中检查它时，我看不到容器的尺寸，并且当DOM真的很深时，很难理解哪个元素包含了屏幕上的哪个区域，等等.

在我看来，所有角度元素默认情况下都应块显示，这是合乎逻辑的，因为对于大多数情况来说，这是有道理的.

作为示例，请考虑以下元素

  bbs-accordion-header//(宽0像素，高0像素) 

包含

  bbs-accordion-header-regular//(宽1920像素，高153像素) 

所以bbs-accordion-header没有任何尺寸，即使是孩子也有.

我通过在每个元素.scss文件中手动添加一行来解决此问题

 :host {display:block;} 

但是每次手动添加它都是非常繁琐的.有谁知道更好的解决方案?

解决方案

我的请求请求已被合并.

随着即将发布的Angular CLI v9.1.0 ，将提供一个新选项:

 -displayBlock = true | false 

文档: https://next.angular.io/cli/generate#component

对于不耐烦的人:现在可以在

从现在开始，任何生成的组件(无论是否带有内联css的组件)都将包含css:

:host {display:block;}

可在此处获得更多详细信息: 解决方案

My pull-request has been merged.

With the upcoming release of Angular CLI v9.1.0 a new option is going to be available:

--displayBlock=true|false

Docs: https://next.angular.io/cli/generate#component

For the impatient: It's available right now in v9.1.0-next.0

When using the CLI:

ng generate component dashboard --displayBlock=true

Settting a default value in angular.json:

...
"projectType": "application",
"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }
...

From now on any generated component, be it with the css inlined or not, will contain the css:

:host { display: block; }

More detailed information is available here: https://blog.rryter.ch/2020/01/19/angular-cli-generating-block-components-by-default/

这篇关于角组件默认样式CSS显示块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！