las*_*ayf 165 angular2-template angular
我不知道如何向我的组件添加<component></component>动态类属性,但在模板html(component.html)中.
我找到的唯一解决方案是通过"ElementRef"原生元素修改项目.做一些非常简单的事情似乎有点复杂.
另一个问题是必须在组件范围之外定义CSS,从而破坏组件封装.
有更简单的解决方案吗？像<root [class]="..."> .... </ root>模板里面的东西.
Gün*_*uer 263
@Component({
selector: 'body',
template: 'app-element',
// prefer decorators (see below)
// host: {'[class.someClass]':'someField'}
})
export class App implements OnInit {
constructor(private cdRef:ChangeDetectorRef) {}
someField: boolean = false;
// alternatively also the host parameter in the @Component()` decorator can be used
@HostBinding('class.someClass') someField: boolean = false;
ngOnInit() {
this.someField = true; // set class `someClass` on `<body>`
//this.cdRef.detectChanges();
}
}
这样您就不需要在组件外部添加CSS.CSS喜欢
:host(.someClass) {
background-color: red;
}
从组件内部工作,只有someClass在主机元素上设置类时才应用选择器.
Jos*_*vid 158
此答案中建议的技术已弃用,Angular开发人员不应再使用该技术.有关支持的选项,请参阅上一个答案.
Günter的答案很棒(问题是要求动态类属性)但我认为我只是为了完整而添加......
如果您正在寻找一种快速而简洁的方法来将一个或多个静态类添加到组件的主机元素(即,为了主题样式目的),您可以这样做:
@Component({
selector: 'my-component',
template: 'app-element',
host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}
如果你在entry标签上使用一个类,Angular将合并这些类,即
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>
Mik*_*son 29
您可以简单地@HostBinding('class') class = 'someClass';在@Component类中添加。
例子：
@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {
@HostBinding('class') class = 'someClass';
constructor() {}
ngOnInit() {}
}
Sak*_*ham 11
如果你想给你的宿主元素添加一个动态类，你可以将你的HostBinding和一个 getter结合起来作为
@HostBinding('class') get class() {
return aComponentVariable
}
Stackblitz 演示在https://stackblitz.com/edit/angular-dynamic-hostbinding
Ber*_* IT 11
另一个问题是 CSS 必须在组件范围之外定义，从而破坏了组件封装
这不是真的。使用 scss (SASS)，您可以轻松地设置组件（本身；主机）的样式，如下所示：
:host {
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
&.someClass {
visibility: visible;
}
}
这样封装就“完整”了。
| 归档时间： |
|
| 查看次数： |
112426 次 |
| 最近记录： |