Angular：组件标签上的样式类

Question

是否可以在组件上应用这样的类或样式？

元素组件

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.scss']
})

容器组件模板

<app-element class="button"></app-element>

全局.css

.button {
  background :red;
}

Answer 1

是的，这是可能的。:host另一种方法是在组件样式中使用：

:host(.customClass) {
  background: blue;
}

您也可以直接向组件添加样式，如下所示：

 :host {
      background: blue;
 }

或者在您的 .ts 文件中：

@Component({
   selector: 'your-component',
   template: 'your-component.html',
   host: {'class': 'customClass'}
})

您可以:host 在此处阅读更多相关信息。