Angular 组件的自定义 CSS 属性

我有一个封装图片轮播的 Angular 组件。如果使用 :host 选择器使自己成为一个 Flexbox，并使用 ngFor 为通过 @Input 属性传递给它的图片数组中的每个图片重复一个 img 标签。

我有两个相关的问题。

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（已发出 值而不是错误的实例）postcss-custom-properties： /home/用户名/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5: 忽略自定义属性：范围不限于顶级 :root 元素 (图像列表 { ... --pictureMaxHeight: ... }) NonErrorEmissedError: （发出值而不是错误实例） postcss 自定义属性： /home/用户名/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5: 忽略自定义属性：范围不限于顶级 :root 元素 (图像列表 { ... --pictureMaxHeight: ... }) 在 Object.emitWarning (/home/username/wwwroot/node_modules/webpack/lib/NormalModule.js:117:16) 在 result.warnings.forEach (/home/username/wwwroot/node_modules/postcss-loader/lib/index.js:149:49) at Array.forEach（本机） 在 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 @ 多 webpack-dev-服务器/客户端？http://0.0.0.0:0 http://0.0.0.0:0./src/main.ts

我尝试在 app.component.css 文件中声明变量，但这对收到的错误没有影响。

此外，为项目中的每个组件声明自定义属性将完全破坏封装。

有趣的是，即使有警告，它仍然有效。

我知道我可以声明一个自定义 html 属性，但由于这与组件的结构无关并且纯粹是视觉样式，所以对我来说这似乎很臭。

我在这里错过了什么或者有更好的方法来满足这个要求吗？

Angular（或你）正在使用postcss 自定义属性 https://github.com/postcss/postcss-custom-properties插件（如您在消息中看到的），用于需要您声明的自定义属性@custom-properties to the :root每个组件的选择器。你可以禁用警告 https://github.com/postcss/postcss-custom-properties#warnings通过传递选项。

我建议你，如果可以的话，使用postcss-css-变量 https://github.com/MadLittleMods/postcss-css-variables遵循 css 规范。因此，从您的代码片段开始，您可以得到这个，这是更好并且解耦的：

: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);
}