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

Question

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

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

Answer 1

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

或者（对我而言，这有点荒谬），您可以创建一个指令，将该指令应用于本机按钮组件，然后使用Angular Renderer以便根据已激活的按钮将类应用于按钮路线。