Question

我有一个可重复使用的组件ModalComponent已经通过以下方式附加了类名.Modal：

@HostBinding('attr.class') className = `Modal`;

我知道我们可以通过输入传递数据，从而实现以下目标：

@Input() additionalClass;

但是这不能按预期工作：

@HostBinding('attr.class') className = this.additionalClass ? `Modal ${this.additionalClass}` : 'Modal';

将其他类名称传递给Angular2组件的最佳方法是什么？

修改

我已经提出了这个解决方案，但考虑到问题的本质，它似乎非常密集。任何人都可以确认这是实现这一目标的正确方法吗？

@Input() className: string;
@HostBinding('class') extraClasses;
@HostBinding('class.Modal') baseClass;

constructor() {
  this.baseClass = true;
}

ngOnInit() {
  this.extraClasses = this.className;
}

Answer 1

<div class="modal {{additionalClass}}"></div> 你可以像这样设置它，所以div总是会有一个类模态，如果提供'附加类'，它也会显示为一个类别，否则div只会有类'模态'。

将其他类名传递给angular2组件

1 个答案: