当用户开始在 Angular 中输入时如何更改搜索图标答案

【问题标题】：How to change search icon when user start typing in Angular当用户开始在 Angular 中输入时如何更改搜索图标
【发布时间】：2020-07-22 13:17:23
【问题描述】：

我的资产文件夹中有 2 个 SVG 图标，我的 HTML 中有一个用户输入框。我希望第一个图标显示为默认值，但是当用户开始在文本框中输入时，我希望显示第二个图标。我很难实现它。

有相同的搜索图标，但第一个图标只是纯白色，第二个图标是青色。

默认图标 = 搜索放大镜图标。

当用户开始输入时更改此设置 = 搜索放大镜蓝绿色图标。

我不确定是否可以直接更改 SVG 图标的笔触颜色，而不是在资产文件夹中有两个图标，但这是现在的代码。

HTML

        <mat-form-field appearance="fill" style="width: 380px;" >
           <input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)"
            placeholder="Search" class="input">
           <div class="icon"><img src="../../assets//images/icons/search-magnifying-glass-icon.svg"></div>
        </mat-form-field>

一些 TS

  ngOnInit(): void {
    this._filterTags();

    this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this._filterTags(value);
        this.updateQuery(value);
        if(value == ''){
          this.showColumn = false;

        }else{
          this.showColumn = true;
        }
      });

【问题讨论】：

标签： html angular svg angular-material icons

【解决方案1】：

在 html 中你改变你的图标元素来获取参数

 <div class="icon"><img [src]="icon"></div>

然后在组件中创建图标变量

icon="../../assets/images/icons/search-magnifying-glass-icon.svg"

然后在你的代码中

 this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this._filterTags(value);
        this.updateQuery(value);
        if(value == ''){
          this.showColumn = false;
          this.icon="../../assets/images/icons/search-magnifying-glass-icon.svg"
        }else{
          this.showColumn = true;
          this.icon="../../assets/images/icons/search-magnifying-glass-teal-icon"
        }
      });

【讨论】：