角组件默认样式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; }

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

Answer 1

我的 pull-request 已合并。

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

--displayBlock=true|false

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

对于不耐烦的人：它现在在v9.1.0-next.0 中可用

使用 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-generate-block-components-by-default/