Angular 17中如何通过独立文件复用Angular Material模块？

开发者阿泽

2026-6-26

在Angular 17独立组件中复用Angular Material的实现方法

1. 创建复用的Material导入集合文件

替代旧的material.module.ts，创建一个纯导入集合文件（比如src/app/material.imports.ts），把所有需要的Angular Material模块统一导出为一个数组：

// material.imports.ts
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
// 根据你的业务需求添加其他Material模块

export const MATERIAL_IMPORTS = [
  MatButtonModule,
  MatInputModule,
  MatCardModule
];

2. 在独立组件中复用该集合

在你的独立组件里，通过展开运算符直接导入这个集合，无需逐个编写Material模块：

// 示例独立组件文件，比如app.component.ts
import { Component } from '@angular/core';
import { MATERIAL_IMPORTS } from './material.imports';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    // 其他需要的独立组件、管道或指令
    ...MATERIAL_IMPORTS // 复用统一的Material导入集合
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular17-material-demo';
}

3. 全局复用（可选）

如果希望部分Material模块在全应用生效，可在main.ts的bootstrapApplication中配置全局导入：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MATERIAL_IMPORTS } from './app/material.imports';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations() // 必须配置，Angular Material依赖动画模块
  ],
  imports: [...MATERIAL_IMPORTS] // 全局生效的Material模块
}).catch(err => console.error(err));