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

问题描述

我厌倦了所有 0x0 像素的 angular 元素，因为它们的名称类似于 app-card、app-accordion，浏览器无法将其识别为 HTML5 兼容元素，因此不会为其提供任何默认样式.

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

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

例如，考虑这些元素

bbs-accordion-header//(宽0px，高0px)

包含

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

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

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

:host { display: block;}

但是每次都手动添加这个很繁琐.有人知道更好的解决方案吗?

解决方案

我的 pull-request已合并.

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

--displayBlock=true|false

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

对于不耐烦的人:现在可以在 v9.1.0-next.0

使用 CLI 时:

ng 生成组件仪表板 --displayBlock=true

在 angular.json 中设置默认值:

<预><代码>...项目类型":应用程序"，原理图":{@schematics/angular:component":{显示块":真}}...

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

:host { display: block;}

此处提供更多详细信息:https://blog.rryter.ch/2020/01/19/angular-cli-generate-block-components-by-default/

I am sick of all my angular elements being 0x0 pixels, because they have names like app-card, app-accordion, which the browser does not recognise as HTML5 compliant elements and as thus, will not give any default styles to.

This is means that inspecting it in Chrome, I fail to see the container dimensions and when the DOM is really deep, it is hard to understand which element encompasses which area on the screen, etc.

It feels logical to me that all angular elements should be block displayed by default, because for the majority, it makes sense.

As an example, consider these elements

bbs-accordion-header //(width 0px, height 0px)

contains

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

So bbs-accordion-header does not have any dimensions, even though it's children do have them.

I solve this, by manually adding one line to each elements .scss file

:host { display: block; }

But it is very tedious to add this manually every time. Does anyone know of a better solution?

解决方案

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/

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