Angular中如何合并两个组件的不同:host() CSS规则？

当两个Angular组件的:host规则属性值不同时，想要合并CSS文件可以通过以下几种方式实现：

1. 用组件选择器限定:host规则 #

Angular每个组件都有唯一的selector（组件选择器），你可以在合并后的CSS文件中，给:host加上组件选择器作为限定，让各自的样式只作用于对应的组件。

假设第一个组件的选择器是app-first-component，第二个是app-second-component，合并后的CSS代码如下：

:host(app-first-component) {
    flex: 2;
    overflow: auto;
}

:host(app-second-component) {
    flex: 1;
    position: visible;
}

这种方式能精准区分两个组件的宿主样式，避免属性覆盖。

2. 使用CSS自定义属性（变量）统一管理 #

如果两个组件的宿主样式有部分共性，可以用CSS变量提取可变属性，在合并的公共CSS中定义基础规则，再在每个组件的私有样式里赋值变量。

合并的公共CSS文件：

:host {
    /* 定义变量，设置默认值 */
    flex: var(--host-flex, 1);
    overflow: var(--host-overflow, visible);
    position: var(--host-position, static);
}

第一个组件的私有样式：

:host {
    --host-flex: 2;
    --host-overflow: auto;
}

第二个组件的私有样式：

:host {
    --host-flex: 1;
    --host-position: visible;
}

这种方式既能合并大部分公共样式，又能保留组件的独特属性设置。

3. 拆分公共样式与私有样式 #

如果不想完全合并所有样式，可以把两个组件的公共CSS代码抽到一个共享文件，每个组件的styleUrls同时引入共享文件和自己的私有样式文件。

比如创建shared-styles.css存放公共样式，然后：

• 组件1的@Component元数据：

@Component({
  selector: 'app-first-component',
  templateUrl: './first.component.html',
  styleUrls: ['./shared-styles.css', './style1.css']
})

• 组件2的@Component元数据：

@Component({
  selector: 'app-second-component',
  templateUrl: './second.component.html',
  styleUrls: ['./shared-styles.css', './style2.css']
})

这样公共样式合并复用，各自的:host规则保留在私有文件中，不会冲突。

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