Question

我要更改以下图标：

如果列表已滚动，则应显示图标“ 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>

Answer 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

Answer 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;
}

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

2 个答案: