Angular：如何更改 <mat-nav-list> 中的图标？答案

【问题标题】：Angular: How to change icons inside <mat-nav-list>?Angular：如何更改 <mat-nav-list> 中的图标？
【发布时间】：2019-11-23 23:50:26
【问题描述】：

我想改变图标：

如果列表滚动应显示图标“arrow1”
在其他情况下应显示名为“arrow2”的图标。

如何检查列表是否滚动，并在html中编码？

<mat-nav-list>
    <mat-list-item>
        <h3>Text1</h3>
        <mat-list-item>
            <a>One</a>
        </mat-list-item>
        <mat-list-item>
            <a>Two</a>
        </mat-list-item>
    </mat-list-item>
</mat-nav-list>

【问题讨论】：

你说的是什么类型的图标
你所说的arrow1是什么意思？
我想使用，类似于：tiny.cc/kmcq9y（html 文件中的第 12-14 行）。名称“arrow1”只是示例，我想使用“arrow_right”和“arrow_drop_down”
查看此演示：stackblitz.com/edit/angular-jrqffa
我想使用不同的图标，取决于我的列表是否滚动，在您的代码中有两个相同的图标。

标签： css angular typescript angular-material frontend

【解决方案1】：

您需要遍历（深、深）到存在mat-select-arrow 类的渲染元素，并将其替换为您选择的任何图标；您需要在 ngOnInit 中执行此操作，以便在您执行此操作时加载 DOM；

相关TS：

import {Component,ElementRef, Renderer2, ViewChild} from '@angular/core';

@Component({
  selector: 'select-form-example',
  templateUrl: 'select-form-example.html',
  styleUrls: ['select-form-example.css'],
})
export class SelectFormExample {
  @ViewChild('mySelect')mySelectElement:ElementRef;

  constructor(private renderer: Renderer2, hostElement: ElementRef) {  }

  ngOnInit(){
    let myElement = this.mySelectElement.nativeElement.childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[1].childNodes[0].childNodes[1].childNodes[0];
    this.renderer.removeClass(myElement, 'mat-select-arrow');
    this.renderer.addClass(myElement, 'fas');
    this.renderer.addClass(myElement, 'fa-cat');
  }
}

完成working stackblitz here

【讨论】：

【解决方案2】：

在我看来，您不应该“更改”图标，而是可以根据一些变量/对象状态隐藏/显示图标。这样会是一种更好的方法（例如：因为图标更改是即时的，所以不存在延迟）。我在这里编译了一个 stackblitz 演示，所以你可以查看我的版本：

https://stackblitz.com/edit/angular-63sjtx?file=app%2Flist-sections-example.html

这就是我做 html 的方式，例如：

    <mat-list>
      <h3 mat-subheader>Folders</h3>
      <mat-list-item *ngFor="let folder of folders; let i = index" (click)="toggleArrow(i)" class="list-item">
        <mat-icon mat-list-icon [ngClass]="folder.open ? 'hidden' : ''">arrow_right</mat-icon>
        <mat-icon mat-list-icon [ngClass]="folder.open ? '' : 'hidden'">arrow_drop_down</mat-icon>
        <h4 mat-line>{{folder.name}}</h4>
        <p mat-line> {{folder.updated | date}} </p>
      </mat-list-item>
    </mat-list>

还有打字稿：

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

export interface Section {
  name: string;
  updated: Date;
  open: boolean
}

/**
 * @title List with sections
 */
@Component({
  selector: 'list-sections-example',
  styleUrls: ['list-sections-example.css'],
  templateUrl: 'list-sections-example.html',
})
export class ListSectionsExample {
  folders: Section[] = [
    {
      name: 'Photos',
      updated: new Date('1/1/16'),
      open: false
    },
    {
      name: 'Recipes',
      updated: new Date('1/17/16'),
      open: false
    },
    {
      name: 'Work',
      updated: new Date('1/28/16'),
      open: false
    }
  ];

  toggleArrow(folderIndex) {
    this.folders[folderIndex].open = !this.folders[folderIndex].open;
  }
}

最后是 CSS：

.mat-list-icon {
  color: rgba(0, 0, 0, 0.54);
}

.list-item {
  cursor: pointer;
}

.list-item:hover {
  background: #eee;
}

.list-item .hidden{
  display: none;
}

【讨论】：