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

【问题标题】：Custom CSS classes on Angular 2 component templates based on location基于位置的 Angular 2 组件模板上的自定义 CSS 类
【发布时间】：2018-12-20 18:51:12
【问题描述】：

我们的团队正在将我们的代码库迁移到 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;
}

但我们希望尽可能减少嵌套。

【问题讨论】：

您可以使用routes 了解您当前所在应用的哪个页面，并使用条件类angular.io/guide/router#activated-route 采取相应措施
您可以在组件上使用@Input 并通过此输入配置它应该是哪个按钮，使用 ngClass 通过输入值更改 css 或在此组件内创建几种元素并切换它们之间基于输入值。（我希望我理解你想要达到的目标）

标签： angular angular2-template

【解决方案1】：

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

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

【讨论】：