角组件默认样式CSS显示块

Question

我讨厌所有的角度元素都为0x0像素，因为它们具有应用卡，应用手风琴之类的名称，浏览器无法识别它们为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

My pull-request has been merged。

随着即将发布的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-generating-block-components-by-default/