如何将 "class" 添加到宿主元素？

Question

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

我找到的唯一解决方案是通过 "ElementRef" 本机元素修改项目。做一些应该非常简单的事情，这个解决方案似乎有点复杂。

另一个问题是 CSS 必须在组件范围之外定义，破坏组件封装。

有没有更简单的解决方案？模板中类似 <root [class]="..."> .... </ root> 的内容。

Answer 1

这样你就不需要在组件外添加 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(); 
  }
}

Plunker example

此 CSS 是在组件内部定义的，仅当 class someClass 在宿主元素（从外部）上设置时才应用选择器：

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

Answer 2

Günter 的回答很好（问题是询问 dynamic class 属性）但我想我会添加只是为了完整性...

如果您正在寻找一种快速简洁的方法来将一个或多个 static classes 添加到组件的宿主元素（即，用于主题-造型目的）你可以这样做：

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

如果您在入口标签上使用 class，Angular 将合并 class，即

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

Answer 3

这是我的做法 (Angular 7):

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

@Input() componentClass: string = '';

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

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

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

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

免责声明：我是 Angular 的新手，所以我在这里可能只是走运！

Answer 4

您只需在 @Component class.

中添加 @HostBinding('class') class = 'someClass';

示例：

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

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

  constructor() {}      

  ngOnInit() {}
}

Answer 5

如果您想将动态 class 添加到您的宿主元素，您可以将 HostBinding 与 getter 组合为

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

https://stackblitz.com/edit/angular-dynamic-hostbinding

上的 Stackblitz 演示

Answer 6

对于多个classes的情况，正如@jbojcic上面提到的，你可以使用：

主持人：{class：'A B C'}

Answer 7

Another problem is that CSS has to be defined outside component scope, breaking component encapsulation

这不是真的。使用 scss (SASS)，您可以轻松地设置组件（本身；主机）的样式：

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

    &.someClass {
        visibility: visible;
    }
}

这样封装就“完好无损”了。

Answer 8

除了@JoshuaDavid 的回答之外，还有另一种定义静态 class 的方法，它在我尝试时适用于 angular v8（也可能在旧版本上工作):

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

这将生成以下输出：

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

你也可以这样使用：

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

这将生成以下输出：

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

Answer 9

这是我所做的：

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
    ) { }
}

如何将 "class" 添加到宿主元素？

How to add "class" to host element?

angular2-template

angular