如何添加“;类”;宿主元素?

我不知道如何向我的组件<component></component>添加一个动态类属性，但在模板html (component.html)中。

我找到的唯一解决方案是通过“ElementRef”原生元素修改项目。这个解决方案似乎有点复杂，做一些应该很简单的事情。

另一个问题是CSS必须在组件作用域之外定义，这破坏了组件封装。

有没有更简单的解决办法?比如模板中的<root [class]="..."> .... </ root>。

216592 次浏览
小开
最佳答案

这样你就不需要在组件外添加CSS了:

@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();
}
}

< a href = " https://plnkr.co/edit/TlMNe42oEvWuN4KjF8KP?p=preview" rel="noreferrer">活塞示例 . p=preview" rel="noreferrer">

这个CSS是在组件内部定义的，只有当类someClass被设置在宿主元素上(从外部)时，选择器才会被应用:

:host(.someClass) {
background-color: red;
}
小开

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>
小开

下面是我的做法(Angular 7):

在组件中，添加一个输入:

@Input() componentClass: string = '';

然后在组件的HTML模板中添加如下内容:

<div [ngClass]="componentClass">...</div>

最后在你实例化组件的HTML模板中:

<root componentClass="someclass someotherclass">...</root>

免责声明:我是Angular的新手，所以我可能只是运气好而已!

小开

你可以简单地在@ component类中添加@HostBinding('class') class = 'someClass';。

例子:

@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {


@HostBinding('class') class = 'someClass';


constructor() {}


ngOnInit() {}
}
小开

如果你想给你的宿主元素添加一个动态类，你可以将你的HostBinding和getter结合起来

@HostBinding('class') get class() {
return aComponentVariable
}

Stackblitz演示在https://stackblitz.com/edit/angular-dynamic-hostbinding

小开

对于多职业的情况，就像上面提到的@jbojcic，你可以使用:

主机:{类:'A B C'}

小开

另一个问题是CSS必须在组件作用域之外定义，这破坏了组件封装

这是不对的。使用scss (SASS)，您可以轻松地样式组件(本身;主机)如下:

:host {
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;


&.someClass {
visibility: visible;
}
}

这样封装是“不可破坏的”。

小开

除了@ joshudavid的答案，还有另一种方法来定义静态类，当我尝试在angular v8上工作时(可能也适用于旧版本):

@Component({
selector: "my-component.someClass1.someClass2",
...
})

它将生成以下输出:

<my-component class="someClass1 someClass2">
...
</my-component>

你也可以这样用:

@Component({
selector: ".someClass1.someClass2",
...
})

它将生成以下输出:

<div class="someClass1 someClass2">
...
</div>
小开

这就是我所做的:

import { Component, Attribute, HostBinding } from "@angular/core";


@Component({
selector: "selector-el",
template: ...
})
export class MyComponent {
@HostBinding('class') get classAttribute(): string {
let defaultClasses = 'selector-el-class';
return defaultClasses + ' ' + this.classNames;
}


constructor(
@Attribute('class') public classNames: string
) { }
}
小开

当你有多个主机绑定类时，我发现下面使用HostBinding getter是最方便的:

@Component({ ... })
export class MyComponent {
@Input()
theme: 'success' | 'error';


@HostBinding('class')
get classes(): Record<string, boolean> {
'my-component': true,
'my-component-success-theme': this.theme == 'success',
'my-component-error-theme': this.theme == 'error'
}
}

即使对于没有相应逻辑的普通类绑定，这也是在一个地方管理所有宿主类的好方法。

@Component({ ... })
export class MyComponent {
@HostBinding('class')
get classes(): Record<string, boolean> {
'my-component': true,
'my-component-modifier': true
}
}

此外，与@Component装饰器的host属性不同，这种方法还允许为类字符串使用枚举。

export enum MyComponentClass {
BaseClass = 'my-component',
ModifierClass = 'my-component-modifier'
}


@Component({ ... })
export class MyComponent {
@HostBinding('class')
get classes(): Record<string, boolean> {
[MyComponentClass.BaseClass]: true,
[MyComponentClass.ModifierClass]: true
}
}

提交答案