2

画像カルーセルをカプセル化する Angular コンポーネントがあります。:host セレクターを使用してそれ自体をフレックスボックスにし、ngFor を使用して @Input プロパティを介して渡された画像の配列内の各画像に対して img タグを繰り返します。

関連する問題が 2 つあります。

1) 写真のスタイルを固定の高さまたは幅に設定できるようにしたい。2) 写真の間隔を空けるために、imgs に margin-right と margin-bottom を設定したいと考えています。

注意が必要なのは、これらの設定をカルーセル テンプレートではなくホスト テンプレートで決定して、特定のページのニーズに基づいて変更できるようにすることです。

次のようなカスタム css プロパティを使用して動作させました。

画像リスト css:

:host {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

img {
    height: var(--pictureMaxHeight,-1);    
    margin-right: var(--pictureSpacing,0);
    margin-bottom: var(--pictureSpacing,0);
}

テンプレートCSSの呼び出し:

image-list {
   --pictureMaxHeight: 300px;
   --pictureSpacing: 0.5em;
   justify-content: center;
}

次の警告が表示されます。

カスタム プロパティは無視されました: スコープが最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) に限定されていません

全文：

./src/app/pages/image-list-test/image-list-test.component.css の WARNING (Error のインスタンスの代わりに発行された値) postcss-custom-properties: /home/username/wwwroot/src/ app/pages/image-list-test/image-list-test.component.css:2:5: カスタム プロパティは無視されました: 最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) NonErrorEmittedError: (エラーのインスタンスの代わりに発行された値) postcss-custom-properties: /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component. css:2:5: カスタム プロパティは無視されました: Object.emitWarning (/home/username/wwwroot/node_modules) の最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) にスコープされていません/webpack/lib/NormalModule.js:117:16) result.warnings で。forEach (/home/username/wwwroot/node_modules/postcss-loader/lib/index.js:149:49) at Array.forEach (native) at postcss.process.then (/home/username/wwwroot/node_modules/postcss- loader/lib/index.js:149:27) @ ./src/app/pages/image-list-test/image-list-test.component.ts 48:21-62 @ ./src/app/app. module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

app.component.css ファイルで変数を宣言しようとしましたが、受け取ったエラーに違いはありませんでした。

さらに、プロジェクト内のすべてのコンポーネントに対してカスタム プロパティを宣言すると、カプセル化が完全に壊れてしまいます。

興味深いのは、警告があっても機能することです。

カスタム html 属性を宣言できることはわかっていますが、これはコンポーネントの構造とは関係なく、純粋に視覚的なスタイリングであるため、私には臭いように思えます。

ここで何かを見逃したのでしょうか、それともこの要件に対処するためのより良い方法はありますか?

4

1 に答える 1

1

Angular (またはあなた) は、各コンポーネントのセレクターに宣言する必要があるカスタム プロパティにpostcss-custom-propertiesプラグイン (メッセージでわかるように) を使用しています。オプションを渡すことで、警告を無効にすることができます。@custom-properties:root

可能であれば、css 仕様に準拠したpostcss-css-variablesを使用することをお勧めします。したがって、スニペットから始めて、これを使用できます。これは、はるかに優れており、分離されています。

:host {
  --pictureMaxHeight: var(--public-var);
  --pictureSpacing: var(--public-var);

  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

img {
  height: var(--pictureMaxHeight,-1);    
  margin-right: var(--pictureSpacing,0);
  margin-bottom: var(--pictureSpacing,0);
}
于 2018-01-17T10:54:17.127 に答える