时间戳

首页 > 解决方案 > 基于位置的 Angular 2 组件模板上的自定义 CSS 类

angular - 基于位置的 Angular 2 组件模板上的自定义 CSS 类

问题描述

我们的团队正在将我们的代码库迁移到 Angular 2，并负责 CSS 开发/组织，我研究了在 Angular 2 中添加样式的选项以及 Angular 2 如何改变我们构建 UI 的方式。我们的许多 UI 元素都是组件。我想做的一件事是将自定义 CSS 类添加到组件模板中的父元素，具体取决于它出现的位置。这是一个示例 UI 元素：

<button class="basic-button">
    Some action text
</button>

这将存在于一个名为basic-button.component.html. 它的组件选择器是basic-button. 假设按钮出现在客户的帐户设置页面中，并且设计需要与我们的默认值不同的文本颜色值。我们想为按钮元素添加一个修饰符 CSS 类：

<button class="basic-button--alert basic-button">
    Some action text
</button>

但是如果相同的按钮也出现在产品页面中并且需要另一个颜色值，我们需要应用不同的修饰符类：

<button class="basic-button--warning basic-button">
    Some action text
</button>

有没有办法根据按钮元素的出现位置将自定义类附加到按钮元素？将类应用到实际的 HTML 元素很重要，因为将其应用到组件选择器可能不会正确影响样式，如在本例中按钮的文本颜色。由于特定原因，我们不打算对 CSS 进行范围界定，所以理论上我们可以使用嵌套来实现我们的目标：

.account-settings .basic-button {
    color: red;
}

.product-details .basic-button {
    color: orange;
}

但我们更喜欢尽可能减少嵌套。

标签： angularangular2-template

解决方案

使用激活路由的想法很好。我将创建一个自定义按钮组件，其中包含按钮，您可以继承要应用的属性并使用HostBinding根据激活的路由在自定义组件上应用类。

或者（对我来说感觉有点 hacky）你可以创建一个指令，你可以将它应用到本机按钮组件，然后使用 Angular Renderer以便根据激活的路由在按钮上应用类。

推荐阅读