如何将“类”添加到主机元素?

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

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

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

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

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

砰砰作响的例子

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

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

2016-01-06 21:40:30

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-08 01:42:12

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

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

@Input() componentClass: string = '';

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

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

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

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

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

2019-02-23 17:07:46

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

例子:

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

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

  constructor() {}      

  ngOnInit() {}
}

2019-10-25 10:19:16

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

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

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

2020-01-13 07:23:28

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

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

2020-09-21 04:15:41

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

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

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

    &.someClass {
        visibility: visible;
    }
}

这样封装是“完整的”。

2020-09-29 10:07:28

除了@ 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>

2021-06-02 09:30:44

这就是我所做的:

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-28 02:24:51

当你有多个主机绑定类时，我发现下面使用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
    }
}

2022-10-18 13:08:06

如何将“类”添加到主机元素?

推荐文章

最新文章

标签