如何在 <mat-toolbar> 中插入带有 Angular 材质的可点击徽标？

【问题标题】：How do I insert in a <mat-toolbar> a clickable logo with Angular material?如何在 <mat-toolbar> 中插入带有 Angular 材质的可点击徽标？
【发布时间】：2022-02-09 19:04:52
【问题描述】：

有没有办法在<mat-toolbar> 中插入一个可点击的标志？我正在使用 Angular 材质，我想在下面的 html 代码中插入可点击的图片而不是 <span>aPHrodite</span>，以拦截该图片上的点击事件。

<mat-toolbar>
  <button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
        ....
  <span>aPHrodite</span>
  <span class="spacer"></span>
        ....
</mat-toolbar>

【问题讨论】：

标签： html angular user-interface angular-material

【解决方案1】：

带有点击监听器的图片标签？

<mat-toolbar>
  ...
  <img [src]="myImageUrl" (click)="myMethod()">
  ...
</mat-toolbar>

【讨论】：

是的，但我想使用图片的网址。我应该这样做：<img url="imageUrl" (click)="myMethod()">？
您仍然使用src 属性，只是没有属性绑定的方括号。我希望你不介意我提出这个建议，但我认为某些课程可能对你非常有用。大部分都涵盖了这种东西，给你很多练习的机会。我强烈推荐 Max Schwarzmuller 的课程（Academind/Udemy）。