Angular 6项目中如何通过mat-button组件跳转至外部URL

嘿，作为刚接触Angular Material的新手，这个问题确实容易卡壳——我当初也琢磨了好一会儿！其实实现mat-menu-item跳转外部URL有两种很直观的方法，给你一步步说：

方法1：直接用<a>标签结合mat-menu-item指令 #

Angular Material允许我们给<a>标签添加mat-menu-item指令，这样既保留了链接的原生跳转功能，又能拥有Material菜单的样式。直接在<mat-menu>里替换成<a>标签即可：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <!-- 跳转至外部链接，target="_blank"表示在新窗口打开 -->
  <a mat-menu-item href="https://example.com" target="_blank">跳转到Example（新窗口）</a>
  <button mat-menu-item>Item 2</button>
</mat-menu>

如果想在当前窗口跳转，去掉target="_blank"就行。

方法2：通过点击事件触发跳转（适合需要额外逻辑的场景） #

要是你需要在跳转前做一些操作（比如验证、日志记录），可以给mat-menu-item绑定点击事件，在TS代码里实现跳转逻辑：

修改后的HTML代码： #

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="navigateToExternalUrl()">跳转到外部链接</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

修改后的Typescript代码： #

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

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  navigateToExternalUrl() {
    // 方式1：在当前窗口跳转
    window.location.href = 'https://your-target-url.com';
    
    // 方式2：在新窗口打开（可选）
    // window.open('https://your-target-url.com', '_blank');
  }
}

为什么直接给<button mat-menu-item>加href没用？因为mat-menu-item是基于原生<button>的，而按钮本身没有href属性，所以得用上面两种方法之一来实现跳转~

内容的提问来源于stack exchange，提问作者PCorruthers