Angular 将类添加到自定义组件2

我有一个

，我想给myComponent上课

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

这不起作用``

---

我怎样才能做到这一点呢？

我认为这不管用，但有一些简单的解决办法：

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

最好的解决方法是将

放在

中，并将类应用于该

div

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

---

在

组件中添加
styleurl
，并使用
css
文件设置内容的样式，您可以使用host方法

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

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

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

export class componentName{
}

您可以对组件使用@Input，并在任何位置设置外部类

例如：

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


/my-component.component.html

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


组件工作！
您遇到的问题是什么？您是否试图在组件的内容中应用类的样式？是的@MadhuRanjan，我想将例如边框颜色、宽度等作为一个控件提供给我的控件谢谢，在哪里使用isMyClass属性？抱歉，我不确定我是否理解这个问题
isMyClass
只是我选择的一个名称。名字不重要<代码>“class.my class”

定义应该添加或删除的类。

@HostBinding（）

前面的属性值用于确定是否应添加或删除类（

true

/

false

）。唯一与

isMyClass

的名称相关的thin是当您想要更改类似

this.isMyClass=false的值时myclass

添加到

MyComponent

组件的宿主元素中。现在，您可以使用

：host my-component.my-class{…}

从父元素

styleurl:['parent.css']

或从

MyComponent

s

styleurl:[my component.css']

使用

：主机上下文（.my class）{…}

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