Question

假设您有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 {}

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

Answer 1

可能您可以对组件使用基类：

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

    //or

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

class MyComponent extends Component {}

避免角度重复类选择器

1 个答案: