单击时如何更改垫子图标？

Question

我在 Angular 中使用 mat-menu，如果单击，我想更改 mat-icon，但事情并没有像我预期的那样工作。 我可能做错了什么？

这是我的 app.html：

<button mat-icon-button [matMenuTriggerFor]="menu" >
  <mat-icon (click)="changeIcon()">{{icon}}</mat-icon>
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">
  <button mat-menu-item>
    <span>Log in</span>
  </button>
  <button mat-menu-item>
    <span>Register</span>
  </button>  
</mat-menu>

和我的 app.ts

export class HeaderComponent implements OnInit {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  icon = 'more_vert';

  constructor() {
  }

  ngOnInit() {
  }

  changeIcon() {
    if (this.trigger.menuClosed) {
      this.icon = 'more_vert';
      console.log('fermer');
    }
    if (this.trigger.menuOpened) {
      this.icon = 'close';
      console.log('ouvert');
    }
  }
}

Answer 1

我找到了部分解决方案。 其他建议？

应用程序.html

<button mat-icon-button [matMenuTriggerFor]="menu" (click)="changeIcon()" #menuTrigger="matMenuTrigger" >

    <mat-icon>{{icon}}</mat-icon>
  </button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>
      <span>Log in</span>
    </button>
    <button mat-menu-item>
      <span>Register</span>
    </button>

  </mat-menu>

和 app.ts

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit  {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

icon = 'more_vert';

constructor() {
}

ngOnInit() {

}


changeIcon() {
  this.trigger.menuClosed.subscribe(() => this.icon = 'more_ver');
  this.trigger.menuOpened.subscribe(() => this.icon = 'close');

}

}

Answer 2

只是想我会添加这个，因为当我搜索类似的东西时出现了这个条目。

您可以将(click)="changeIcon()"放在标记中，并坚持在 .TS 文件中进行设置（让您的订阅者完成工作）：

ngAfterViewInit() {
    this.changeIcon();
}

Answer 3

您可以将(click)="changeIcon()"放在标记中，并坚持在.ts文件中进行设置（让您的订阅者完成工作）； 并调用 ngonInit();

ngonInit(){
  this.changeIcon()
}