web-dev-qa-db-ja.com

Angularコンポーネントのデフォルトスタイルのcss表示ブロック

私はすべてのangular要素が0x0ピクセルであることにうんざりしています。なぜなら、それらはapp-card、app-accordionのような名前を持っているからです。これは、ブラウザーがHTML5準拠の要素として認識しないため、認識しません。デフォルトのスタイルをに与えます。

これは、Chromeで調べたところ、コンテナのサイズがわからず、DOMが非常に深い場合、どの要素が画面のどの領域を包含しているかなどがわかりにくいことを意味します。

すべてのangular要素はデフォルトでブロック表示されるはずです。大多数の場合、それは理にかなっているからです。

例として、これらの要素を考えてみましょう

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

含まれています

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

enter image description here

enter image description here

enter image description here

したがって、bbs-accordion-headerには、子には次元がありますが、次元はありません。

各要素の.scssファイルに手動で1行追加することで、これを解決します

:Host { display: block; }

しかし、これを毎回手動で追加するのは非常に面倒です。誰かがより良い解決策を知っていますか？

angularangular6angular5angular2-templateangular7
11
Karl Johan Vallner

プルリクエストがマージされました 。

Angular CLIv9.1.0の次のリリースで、新しいオプションが利用可能になります：

--displayBlock=true|false

ドキュメント： https://next.angular.io/cli/generate#component

せっかちな人のために：現在 v9.1.0-next.で利用可能です


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/

4
rryter