Angular组件的自定义CSS属性 [英] Custom CSS attributes for Angular components

问题描述

我有一个Angular组件，它封装了图片轮播.如果使用:host选择器将其自身设置为flexbox，则ngFor会为通过@Input属性传递给它的图片数组中的每张图片重复一个img标签.

I have an Angular component that encapsulates a picture carousel. If uses the :host selector to make itself a flexbox and ngFor to repeat an img tag for each picture in an array of pictures passed in to it through an @Input property.

我有两个相关的问题.

1)我想允许将图片样式设置为固定的高度或宽度.2)我想在imgs上设置margin-right和margin-bottom，以允许图片间距.

1) I want to allow the pictures to be styled to a fixed height or width. 2) I want to set the margin-right and margin-bottom on the imgs to allow spacing the pictures.

棘手的是，我希望这些设置是在主机模板而不是轮播模板中确定的，以便可以根据特定页面的需求进行更改.

The tricky part is that I want these settings to be determined in the host template, not the carousel template so that they can be vary based on the needs of a particular page.

我已经使用如下自定义css属性使它工作:

I've got it working using custom css properties like this:

图片列表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元素(图像列表{... --pictureMaxHeight:...})

Custom property ignored: not scoped to the top-level :root element (image-list { ... --pictureMaxHeight: ... })

全文:

警告输入./src/app/pages/image-list-test/image-list-test.component.css(已发布值而不是Error的实例)postcss-custom-properties:/home/用户名/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5:自定义属性被忽略:范围仅限于顶级:root元素(图像列表{... --pictureMaxHeight:...))NonErrorEmittedError:(发出的值，而不是Error的实例)postcss-custom-properties:/home/用户名/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5:自定义属性被忽略:范围仅限于顶级:root元素(图像列表{... --pictureMaxHeight:...})在Object.emitWarning(/home/用户名/wwwroot/node_modules/webpack/lib/NormalModule.js:117:16)在result.warnings.forEach(/home/用户名/wwwroot/node_modules/postcss-loader/lib/index.js:149:49)在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.ts48:21-62 @ ./src/app/app.module.ts @ ./src/main.ts @多webpack-dev-server/client? http://0.0.0.0:0 ./src/main.ts

WARNING in ./src/app/pages/image-list-test/image-list-test.component.css (Emitted value instead of an instance of Error) postcss-custom-properties: /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5: Custom property ignored: not scoped to the top-level :root element (image-list { ... --pictureMaxHeight: ... }) NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-properties: /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component.css:2:5: Custom property ignored: not scoped to the top-level :root element (image-list { ... --pictureMaxHeight: ... }) at Object.emitWarning (/home/username/wwwroot/node_modules/webpack/lib/NormalModule.js:117:16) at 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文件中声明该变量，但对收到的错误没有影响.

I tried declaring the variable in the app.component.css file but it made no difference to the error received.

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

Besides, declaring custom properties for every component in the project would completely break the encapsulation.

有趣的是，即使有警告，它也可以工作.

The interesting thing is that it works, even with the warning.

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

I know I could declare a custom html attribute but since this is nothing to do with the structure of the component and is purely visual styling, that seems smelly to me.

我在这里错过了什么吗?还是有更好的方法来解决此要求?

Have I missed something here or is there some better way to address this requirement?

推荐答案

Angular(或您)正在使用 postcss-custom-properties 插件(如您在消息中所见)，用于要求您向<每个组件的:root 选择器.您可以通过传递选项禁用警告.

Angular (or you) are using the postcss-custom-properties plugin (as you can see in the message) for custom properties that require you to declare @custom-properties to the :root selector for each component. You can disable the warning by passing the option.

如果可以的话，我建议您使用 postcss-css-variables 遵循CSS规范.因此，从您的代码片段开始，您可以拥有此功能，这是更好的选择，并且脱钩了:

I suggest you, if you can, to use postcss-css-variables that follow the css spec. So, starting from your snippet you can have this, that is much better and decoupled:

: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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！