Angular中如何用CSS通配符批量选择自定义页面组件标签？

嘿，我完全懂你的需求——不想逐个列出自定义组件标签，想用类似通配符的方式统一给所有app-page-*开头的页面组件加样式对吧？其实有几个靠谱的方法可以实现，我给你梳理一下：

方法一：利用Angular指令自动添加统一类（推荐） #

这个方法不需要修改现有组件的代码，只需要创建一个全局指令就能自动匹配所有app-page-*组件，给它们加上统一的类，然后用类选择器写样式就行。

1. 创建一个新的指令，比如PageDirective：

import { Directive } from '@angular/core';

@Directive({
  selector: 'app-page-*', // 匹配所有以app-page-开头的组件标签
  host: {
    class: 'app-page-component' // 自动给匹配的组件添加这个类
  }
})
export class PageDirective {}

2. 在你的AppModule中声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageDirective } from './page.directive';
// 其他模块和组件导入

@NgModule({
  declarations: [
    // 你的组件列表
    PageDirective // 添加这个指令
  ],
  imports: [
    BrowserModule,
    // 路由模块等其他依赖
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 现在在全局样式./src/styles.styl中，用这个类来写统一样式：

.app-page-component
  border: 1px solid #e0e0e0
  padding: 16px
  /* 其他你需要的样式 */

这个方法的好处是一劳永逸，后续新增的app-page-*组件都会自动应用这个样式，不用额外修改。

方法二：给组件添加宿主类（适合少量组件） #

如果你的页面组件数量不多，可以直接在每个组件的@Component装饰器中添加host属性，手动指定统一的类：

@Component({
  selector: 'app-page-home',
  templateUrl: './page-home.component.html',
  styleUrls: ['./page-home.component.styl'],
  host: {
    class: 'app-page-component'
  }
})
export class PageHomeComponent {}

然后同样在全局样式中用.app-page-component设置样式即可。

方法三：利用基类组件继承（适合大量组件） #

如果有很多页面组件，可以创建一个基类组件，所有页面组件继承它，基类中统一设置宿主类：

1. 创建基类组件：

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

@Component({
  template: '',
  host: {
    class: 'app-page-component'
  }
})
export class BasePageComponent {}

2. 每个页面组件继承这个基类：

import { Component } from '@angular/core';
import { BasePageComponent } from '../base-page.component';

@Component({
  selector: 'app-page-login',
  templateUrl: './page-login.component.html',
  styleUrls: ['./page-login.component.styl']
})
export class PageLoginComponent extends BasePageComponent {}

这样所有继承基类的组件都会自动带上app-page-component类，全局样式同样生效。

为什么直接写app-page-* { ... }不行？ #

你提到的app-page-*不是有效的CSS选择器——CSS中的*通配符是匹配所有元素，而不能直接作为标签名的后缀来匹配前缀。CSS选择器没有原生的“标签名前缀匹配”语法，所以得用上面这些Angular特有的方法来实现需求。

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