@HostBinding与angular2中的变量类

Question

我有这个代码在主机上设置一个类:

@HostBinding('class.fixed') true;

我想做的是让它成为一个我可以修改的变量类.我怎样才能做到这一点？

Answer 1

这不可变.

你可以做的是直接绑定到类属性

@HostBinding('class') classes = 'class1 class2 class3';

Answer 2

如果您的课程数量有限,您可以有条件地添加每个课程:

@HostBinding('class.c1') get c1 () { return this.useC1; } 
@HostBinding('class.c2') get c2 () { return this.useC2; }

请注意,.c1并.c2需要在部件的外侧.

Plunker

Answer 3

我必须与其他答案相矛盾,我实际上发现以下格式完美无缺:

@HostBinding('class.className') variableName = true;

您只需要在CSS类中添加一个范围(您可以在此处查看讨论).

问题是class.className只能看到主机范围,所以如果你在元数据中定义了一些样式,HostBinding你需要指定css属于主机范围.

您可以轻松指定仅Component在CSS规则之前添加的主机范围:

:host.className {
  /* Your CSS here */
}

代替

.className {
  /* Your CSS here */
}

如果你愿意,我创建了一个工作的Plunker,你可以看到点击这里

Answer 4

如果已经有一些类名绑定到变量，那么Günter的答案实际上并没有帮助。

将变量字符串类名称与布尔样式预定义的类名称结合在一起的一种好方法是使用classnames npm软件包。

将其与@HostBinding和和setter函数一起使用可获得惊人的结果：

import * as classNames from 'classnames';

(...)

@HostBinding('class') get classes(): string {
  return classNames(this.getDynamicClassName(), {
    'is-open': this.isOpen,
    'has-children': this.hasChildren
  });
}

Answer 5

@Input()
  class = '';

@HostBinding('attr.class')
get btnClasses() {
return [
    'btn',
    this.someClassAsString,
    this.enableLight ? 'btn-secondary-light' : '',
    this.class,
].filter(Boolean).join(' ');
};

您可以使用输入劫持类属性并在主机绑定中添加您需要的内容