Question

我有一个<myComponent ></myComponent>，我想给myComponent上课？

This doesnt worked `<myComponent class="my-class"></myComponent>`

我该怎么做？

Answer 1

不要认为这会奏效，但有一些简单的解决方法：

如果您要为组件的展示位置/颜色等设置样式：

最佳解决方法是将<myComponent></myComponent>放入<div>并将该类应用于div

如果要设置组件内容的样式：

在styleUrls中添加Component，并使用css文件设置内容样式

Answer 2

class MyComponent {
  @HostBinding('class.my-class')
  isMyClass:boolean = true;
}

Answer 3

您可以在组件中使用 @Input 并在任何地方设置外部类。

示例：

<myComponent [styleClass]="'my-class'"></myComponent>>

你的组件

/my-component.component.ts

...
@Input() styleClass: string; 
...

/my-component.component.html

   <div [class]="styleClass" ngClass="my-component__container any-other-class">
Component works!
   </div>

Answer 4

您可以使用主机方法

import {Component} from "@angular/core";

@Component({
    selector: 'COMPONENT NAME',
    templateUrl: 'COMPONENT URL',
    host: {
        '[class.CLASS NAME]': 'VARIABLE NAME'
    }
})

export class componentName{
}

将类添加到自定义组件角度2

4 个答案: