我知道在Angular2中我可以通过这样做将一个类'red'添加到组件的selector元素中:
@Component({
selector: 'selector-el',
host: {
'[class.red]': 'true'
},
...
})
我想知道是否有办法将动态类添加到主机,类似于你对NgClass的处理(我知道实际上不支持NgClass,我正在寻找可能的解):
@Component({
selector: 'selector-el',
host: {
'[NgClass]': 'colorClass'
},
...
})
...
constructor(){
this.colorClass = 'red';
}
答案 0 :(得分:18)
Renderer
setElementClass
可用于添加或删除任意类。例如md-[color]
其中color
由输入
<some-cmp [color]="red">
@Component({
// @Directive({
selector: 'some-cmp',
template: '...'
})
export class SomeComp {
color_: string;
@Input
set color() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'md-' + this.color_, true);
}
get color(): string {
return this.color_;
}
constructor(public elementRef: ElementRef, private renderer: Renderer){}
}
答案 1 :(得分:13)
你可以使用类似的东西:
@Directive({
(...)
host: {
'[class.className]' : 'className',
'[class]' : 'classNames'
}
}
export class MyDirective {
constructor() {
this.className = true;
this.classNames = 'class1 class2 class3';
}
}
答案 2 :(得分:10)
如果您想从外面更改它,可以合并@HostBinding
和@Input()
:
@Component({
selector: 'my-component',
template: ``
})
export class MyComponent {
@HostBinding('class.your-class') @Input() isSelected: boolean;
}
答案 3 :(得分:6)
import {Component, HostBinding} from 'angular2/core';
@Component({
(...)
}
export class MyComponent {
@HostBinding('class') colorClass = 'red';
}
答案 4 :(得分:5)
我最近制定了一个名为<ng-host>
的指令(受this issue启发),它会将每个(非结构性)更改重定向到组件主机元素,用法:
@Component({
template: `
<ng-host [ngClass]="{foo: true, bar: false}"></ng-host>
<p>Hello World!</p>
`
})
class AppComponent { }
可以找到在线演示here。
支持的用法定义here。
我通过指令即服务模式实现了这一目标,即手动提供 NgClass
并将其用作(online demo)
由于DI机制, NgClass
将获得当前主机元素的ElementRef
,Self()
修饰符有助于保证它。因此,不需要通过构造函数创建实例,因此仍然使用公共API。
与类继承结合使用时可以更简洁,可以在here找到一个示例。
答案 5 :(得分:5)
我以这种方式做到了。也许有人会派上用场
@HostBinding('class') get hostClasses() {
return `some-class ${this.dinamicOne} ${this.disabled ? 'disabled' : ''}`;
}
答案 6 :(得分:-1)
您可以执行以下操作:
import {Component} from "@angular/core"
@Component({
selector: "[textbox]",
host: {"class": "first-class secondClass ThirdClass AnYClaSs"},
template: ...
})
export class MyComponent { }
这比引入变量更直接 应该在Angular2 rc5,rc6,rc7,final中工作。可能在早期版本中有效,但没有尝试过。