html - 添加基于条件/输入属性 Angular 2+ 的 CSS 样式 url

标签 html css angular

我有一个组件,它在应用程序中的两个地方使用过,一个用于列表,另一个用于 slider ,唯一的区别在于 CSS,一个具有更大的 View ,另一个具有更小的 View 和一些其他 CSS 更改。

所以我想在两个地方使用相同的组件并使用不同的外部样式,但为此我需要动态地将 CSS url 添加到组件装饰器中。

这可能吗?如果是怎么办?

最佳答案

我认为您正在寻找指令 ngStylengClass

如果要更改单个 css 属性,请像这样选择 ngStyle:

<some-element [ngStyle]="{'font-size': styleExp}">...</some-element>

你的 styleExp 可以是像

这样的条件语句
  isSmall ? 80% : 100%

如果你想应用样式类,你需要像这样使用 ngClass:

<some-element [ngClass]="{boolExp ? 'first' :'second'}">...</some-element>    
<some-element [ngClass]="{'first': boolExp }">...</some-element>

您的 boolExp 必须返回一个 bool 值。您可以对多个类使用不同的组合。

使用上面的 url 作为引用。

Here是另一个用于学习目的的 URL:

关于html - 添加基于条件/输入属性 Angular 2+ 的 CSS 样式 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49605190/

相关文章:

css - 无法加载资源 "font"

api - 向 OPTIONS 请求添加身份验证

angular - 获取选中的选项文本 onChange

asp.net - 视频标签不适用于移动设备

html - 如何使用 sprint bootstrap 从我的 Controller 到我的 HTML 进行通信?

CSS 转换在 Firefox 上无法正常工作

html - 垂直对齐表单输入的奇怪行为

javascript - 响应式(Reactive)形式的 Angular2 通用异步验证器

javascript - 如何创建指向最初使用 slideToggle 隐藏的部分的链接

javascript - 在 React 中渲染正确的 html 页面时出现问题