239

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

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

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

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

4

9 回答 9

390

这样您就不需要在组件之外添加 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 示例

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

:host(.someClass) {
  background-color: red;
}
于 2016-01-06T21:40:30.520 回答
237

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>
于 2017-01-08T01:42:12.033 回答
36

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

例子：

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

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

  constructor() {}      

  ngOnInit() {}
}
于 2019-10-25T10:19:16.093 回答
14

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

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

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

于 2020-01-13T07:23:28.950 回答
4

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

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

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

    &.someClass {
        visibility: visible;
    }
}

这样封装是“完整的”。

于 2020-09-29T10:07:28.337 回答
2

对于多类情况，如上面提到的@jbojcic，您可以使用：

主机：{类：'AB C'}

于 2020-09-21T04:15:41.160 回答
0

除了@JoshuaDavid的回答，还有另一种定义静态类的方法，当我尝试时它适用于角度v8（可能也适用于旧版本）：

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

这将生成以下输出：

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

你也可以这样使用：

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

这将生成以下输出：

<div class="someClass1 someClass2">
 ...
</div>
于 2021-06-02T09:30:44.493 回答
0

这就是我所做的：

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
    ) { }
}
于 2021-10-28T02:24:51.300 回答
-2

这是我的做法（Angular 7）：

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

@Input() componentClass: string = '';

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

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

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

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

免责声明：我对 Angular 还很陌生，所以我可能在这里很幸运！

于 2019-02-23T17:07:46.343 回答