避免角度中的类选择器重复答案

【问题标题】：Avoid class selector repetitions in angular避免角度中的类选择器重复
【发布时间】：2018-12-27 05:02:26
【问题描述】：

假设您有 n 不同的角度组件，它们都需要一个通用的类选择器 "A"，例如：

<component-i class="A"></component-i>

一种简单的开箱即用方法可能是将所述类添加到装饰器 @Component's host 键作为 host: {'class': 'A'}，在每个单独的组件中：

@Component({
  selector: 'component-i',
  templateUrl: './ui.component-i.html',
  styleUrls: ['./ui.component-i.sass'],
  host: {'class': 'A'}
})

这将使host: {'class': 'A'}n 行重复。

我相信这将是一个糟糕的设计，我正在努力寻找避免这种代码冗余的方法。

我目前的想法是创建一个装饰器@CustomComponent 包装@Component，从而以类似于以下方式删除冗余：

import { Component, TypeDecorator} from '@angular/core';

function CustomComponent(data:object):TypeDecorator {
  let my_class:string = "A"
  let host:object = data["host"] || {};
  let class_:string = host["class"] || '';
  host["class"]=class_+my_class;
  data["host"] = host;
  return Component(data);
}

@CustomComponent({
  selector: 'component-i',
  templateUrl: './component-i.html',
  styleUrls: ['./component-i.sass']
})
export class ComponentI {}

这种方法正确吗？还有其他更清洁的方法吗？

【问题讨论】：

请记住解释否决票，以便问题更好。我不是通过观察投票数下降来学习的。
不需要或不应该对否决票进行解释。简单地说，有人觉得这个问题“不清楚或没用”。考虑到这个问题有多模糊，我猜“不清楚”。
谢谢，我会重构这个问题。我相信这已经足够清楚了。
问题现在更清楚了吗？感谢您的宝贵时间。
我认为它更好，是的（请记住，我不是最初的反对者之一，很少有人会在以后回顾他们的反对票，看看他们是否应该删除它们）。

标签： angular typescript decorator

【解决方案1】：

也许你可以为你的组件使用基类：

abstract class Component
{
    @HostBinding('class.A')
    public classEnabled:boolean = true;

    //or

    @HostBinding('class')
    public classNames:string = 'A';
}

class MyComponent extends Component {}

【讨论】：