2

我有一个封装图片轮播的 Angular 组件。If 使用 :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/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 回答