如何在Angular输入框行内添加两个matSuffix图标并实现取消图标按需显示？

1. 导入必要模块 #

在你的模块文件（如app.module.ts）中导入Angular Material相关依赖模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule } from '@angular/forms'; // 用于ngModel双向绑定

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    FormsModule
  ],
  // 其他模块配置...
})
export class AppModule { }

2. 编写组件模板（HTML） #

通过matSuffix指令添加两个图标，用*ngIf控制取消图标的显示逻辑，同时绑定点击事件实现清空功能：

<mat-form-field appearance="fill">
  <mat-label>输入内容</mat-label>
  <input matInput [(ngModel)]="inputValue" placeholder="请输入">
  <!-- 固定显示的第一个图标（示例用搜索图标） -->
  <mat-icon matSuffix>search</mat-icon>
  <!-- 仅输入有内容时显示的取消图标 -->
  <mat-icon matSuffix *ngIf="inputValue" (click)="clearInput()" style="cursor: pointer;">clear</mat-icon>
</mat-form-field>

3. 组件逻辑代码（TS） #

定义输入框绑定值和清空方法：

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
  inputValue: string = '';

  clearInput() {
    this.inputValue = '';
  }
}

4. 调整图标样式（可选） #

避免两个图标间距过近，添加基础样式：

mat-form-field mat-icon.mat-suffix:not(:first-child) {
  margin-left: 10px;
}

核心逻辑说明 #

• matSuffix：Angular Material内置指令，用于将元素定位在输入框右侧后缀位置
• *ngIf="inputValue"：通过输入框绑定值的存在性，控制取消图标的渲染时机
• (click)="clearInput()"：绑定点击事件，实现一键清空输入框内容

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