Angular中如何根据组件输入属性应用:host选择器样式

该需求完全可以实现，不需要依赖手动给组件加class传值，以下是两种可直接落地的实现方案：

方案1：动态绑定宿主class（最贴合你现有CSS写法） #

这个方案不需要修改你已经写好的:host(.xxx)样式逻辑，只需要在组件类中加一行宿主绑定即可：

1. 在组件类中引入HostBinding，将输入的size值动态绑定为宿主元素的class：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent {
  @Input() size: 'large' | 'small' | 'medium';

  // 将size输入值同步为宿主元素的class
  @HostBinding('class') get hostClass() {
    return this.size;
  }
}

2. 组件样式表完全可以沿用你之前的写法，不需要调整：

:host(.large) {
  color: blue;
}
:host(.small) {
  color: red;
}
:host(.medium) {
  color: green;
}

使用时直接传输入属性即可生效：<app-container [size]="level"></app-container>

方案2：使用自定义属性+属性选择器 #

如果你不想用class控制样式，也可以把size值绑定为宿主元素的自定义属性，配合CSS属性选择器实现效果：

1. 组件类中把size绑定到宿主的自定义属性（比如data-size）上：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent {
  @Input() size: 'large' | 'small' | 'medium';

  // 将size值同步为宿主元素的data-size属性
  @HostBinding('attr.data-size') get hostSizeAttr() {
    return this.size;
  }
}

2. 样式表中使用:host配合属性选择器编写对应样式：

:host([data-size="large"]) {
  color: blue;
}
:host([data-size="small"]) {
  color: red;
}
:host([data-size="medium"]) {
  color: green;
}

注意：Angular的@Input输入属性默认不会自动同步为DOM元素的原生属性，如果你不做@HostBinding手动绑定，CSS选择器无法直接捕获输入属性的值变化，直接写:host([size="large"])是不会生效的。

内容的提问来源于stack exchange，提问作者James Ives