如何正确引入Angular Material组件API？API项应用位置存疑

我当初刚用Angular Material的时候也被这个问题卡过——官网API文档只列了API项，但没说怎么引入和在哪用，其实逻辑很清晰，给你一步步拆解：

一、核心引入逻辑 #

Angular Material的API项分为两种场景引入，对应不同的使用需求：

1. 模块层面：导入组件模块（用于模板使用） #

如果要在模板里用<mat-select>这类组件或相关指令（比如<mat-option>），你只需要在对应的NgModule（比如AppModule或业务模块）中导入组件对应的模块即可，所有该组件的模板可用API（组件、指令、管道）都会被包含进来：

import { NgModule } from '@angular/core';
// 导入mat-select对应的模块
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    // ...其他依赖模块（比如BrowserModule、ReactiveFormsModule等）
    MatSelectModule
  ]
})
export class YourFeatureModule { }

这一步是基础，没导入模块的话，模板里的<mat-select>会被识别为未知标签。

2. 组件代码层面：导入具体API项（用于TS逻辑） #

如果要在组件的TypeScript代码中用到API里的类型、事件、组件实例等（比如获取mat-select的实例、处理选择事件），就需要在组件ts文件中单独导入对应的API项，它们都来自和组件模块相同的路径：

import { Component, ViewChild } from '@angular/core';
// 导入mat-select相关的API项
import { MatSelect, MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'app-select-demo',
  templateUrl: './select-demo.component.html'
})
export class SelectDemoComponent {
  // 通过@ViewChild获取mat-select的组件实例，用于TS中控制组件
  @ViewChild(MatSelect) selectInstance!: MatSelect;

  // 处理选择变化事件，这里用MatSelectChange定义事件参数的类型
  handleSelectionChange(event: MatSelectChange) {
    console.log('选中的值:', event.value);
    console.log('触发事件的组件:', event.source);
  }
}

二、常见API项的应用场景（以mat-select为例） #

给你对应官网API文档里的项，举几个实用场景：

• MatSelect（组件类）：通过@ViewChild/@ViewChildren获取组件实例，实现TS代码控制组件（比如手动打开下拉框、动态设置选中值）
• MatSelectChange（事件类型）：对应<mat-select>的selectionChange事件，用来规范事件参数的类型，获取选中值、触发事件的组件等信息
• MatSelectTrigger（指令）：在模板中给元素添加matSelectTrigger指令，自定义下拉框的触发按钮内容（比如显示已选中值的自定义样式），示例模板：

<mat-select (selectionChange)="handleSelectionChange($event)">
  <mat-select-trigger>
    已选中：{{ selectedValue || '请选择' }}
  </mat-select-trigger>
  <mat-option value="apple">苹果</mat-option>
  <mat-option value="banana">香蕉</mat-option>
</mat-select>

• MatOption（组件类）：如果需要在TS中操作单个选项（比如动态创建选项、获取某个选项的状态），就需要导入这个类。

三、快速定位引入路径的小技巧 #

Angular Material所有API项的引入路径都和组件的文档路径对应：比如<mat-select>的API文档路径是components/select/api，对应的包路径就是@angular/material/select——也就是说，这个API页面里的所有项，都可以从这个路径导入，不用找其他地方。

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