时间戳

首页 > 解决方案 > 从组件访问 CSS 变量

angular - 从组件访问 CSS 变量

问题描述

我想知道是否有任何解决方案可以从组件访问 CSS 变量。我正在构建一个自定义主题，我希望可以从 CSS 模板中更改一些图像，而不是将其添加到组件中。

例如：

我有一个 CSS 变量：

我的组件.scss

imagePath: 'src/assets/image.jpg'

我想从组件访问该变量：

我的组件.ts

export class MyComponent {
   imagePath;
}

我的组件.html

<img src="{{ imagePath }}" />

标签： angularthemesangular8

解决方案

由于图像路径被定义为 CSS 变量，因此您可以直接从 HTML 模板访问它，而无需在 TypeScript 组件中定义任何内容。

但是您需要了解 CSS 变量的一个问题。它们只能用于 CSS 属性，不能用于 HTML 属性（如src=....

background你可以通过使用css 属性来实现你想要的：

<div style="background: var(--image-path);"></div>

请注意，您对 CSS 变量的声明是不正确的。它应该以两个破折号开头，如下所示：

--image-path: url(...);

当然，您还需要确保 div 具有一定的宽度和高度，以便您可以看到背景。

演示

:root {
  --image: url('http://placekitten.com/200/300');
}

div {
  width: 200px;
  height: 300px;
}
<div style="background: var(--image);"></div>

推荐阅读