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

Posted 2023-02-23

【中文标题】避免角度中的类选择器重复

【英文标题】：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 

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

【问题讨论】：

请记住解释否决票，以便问题更好。我不是通过观察投票数下降来学习的。

不需要或不应该对否决票进行解释。简单地说，有人觉得这个问题“不清楚或没用”。考虑到这个问题有多模糊，我猜“不清楚”。

谢谢，我会重构这个问题。我相信这已经足够清楚了。

问题现在更清楚了吗？感谢您的宝贵时间。

我认为它更好，是的（请记住，我不是最初的反对者之一，很少有人会在以后回顾他们的反对票，看看他们是否应该删除它们）。

【参考方案1】：

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

abstract class Component

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

    //or

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


class MyComponent extends Component