Angular组件默认样式CSS显示块

Question

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

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

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

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

bbs-accordion-header //(width 0px, height 0px)
包含
bbs-accordion-header-regular //(width 1920px, height 153px)

所以bbs-accordion-header没有任何尺寸，即使它的孩子确实有它们。

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

:host { display: block; }
但是每次都手动添加它非常繁琐。有谁知道更好的解决方案？

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

] >

I have solved this，我们只需要等待它被发布。

使用CLI时：

ng generate component dashboard --displayBlock=true
在angular.json中设置默认值：
...
"projectType": "application",
"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }
...
从现在开始，在任何生成的组件上，无论是否内联css，都将包含css：
:host { display: block; }
更多详细信息，请点击此处：https://blog.rryter.ch/2020/01/19/angular-cli-generating-block-components-by-default/

Answer 1

I have solved this，我们只需要等待它被发布。