Question

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

我有两个相关的问题。

1）我想允许将图片设置为固定的高度或宽度。 2）我想在imgs上设置margin-right和margin-bottom以允许间隔图片。

棘手的部分是我希望在主机模板中确定这些设置，而不是轮播模板，以便它们可以根据特定页面的需要而变化。

我使用这样的自定义css属性工作：

image-list 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;
}

我收到以下警告：

自定义属性被忽略：没有作用于顶级：根元素（image-list {... --pictureMaxHeight：...}）

全文：

警告 ./src/app/pages/image-list-test/image-list-test.component.css(Emitted 值而不是Error的实例）postcss-custom-properties： /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5：忽略自定义属性：未限定为顶级：根元素（image-list {... --pictureMaxHeight：...}）NonErrorEmittedError：（发出的值而不是Error的实例） postcss定制属性： /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5：忽略自定义属性：未限定为顶级：根元素（image-list {... --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（native）在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属性，但由于这与组件的结构无关，而且纯粹是视觉样式，这对我来说似乎很臭。

我在这里遗漏了什么或者有更好的方法来解决这个问题吗？

Answer 1

Angular（或您）正在使用 postcss-custom-properties 插件（正如您在消息中看到的），需要您向{{@custom-properties声明:root的自定义属性1}}每个组件的选择器。您可以通过选项disable the warning。

如果可以的话，我建议您使用符合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);
}

Angular组件的自定义CSS属性

1 个答案: