Angular mat-button链接到外部URL

Question

Angular 6 (https://angular.io/) 新项目，使用 Material Components (https://material.angular.io/) ~ 如何从 mat-button 组件导航到外部 URL。

HTML

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

类型Script

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

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})

 export class MenuOverviewExample {}

Live Edtior: https://stackblitz.com/angular/maeymnkvlrq 我相信作为一个新手，我可能会错过一些显而易见的东西，但是我找不到我的问题的答案。

- PCorruthers

Answer 1

您可以将button属性更改为一个具有按钮设计的a。

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <a href="http://www.google.com" mat-menu-item>Item 1</a>
  <button mat-menu-item>Item 2</button>
</mat-menu>

- Takatalvi

Answer 2

使用类似于这样的代码来创建一个指向外部网址的按钮：

<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>

- Al Caulique

---

刚刚检查了@AppDreamer，它在Angular 9中也可以工作。只是当未导入MatButtonModule时，我看不到任何错误，所以需要花费几分钟来找出问题所在。导入并手动重新启动（停止然后ng serve）后，它按预期工作。 - iCrus

Answer 3

您可以使用

<mat-menu #menu="matMenu">
  <button mat-menu-item  onClick="window.open('//google.com')">Item 1</button>
  <button mat-menu-item  onClick="window.open('//yahoo.com')">Item 2</button>
</mat-menu>

DEMO STACKBLITZ

- Sajeetharan

---

演示链接显示404错误。 - rofrol

Answer 4

使用window.open可以工作，但如果你正在执行类似于“mailto”的操作，你会在浏览器中打开一个不必要的空白选项卡。我建议使用“location.href =”代替...所以...简而言之...无论是按钮还是菜单，在你的HTML中，都没关系。

  <button mat-raised-button (click)="emailSupport()" style="width:180px;">
    Contact Support
  </button>

然后在你的.ts文件中...

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

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})

 export class MenuOverviewExample {
  ...
  emailSupport(){
     location.href = "mailto:[e-mail]?subject='I need help'&body='write some message'";
  }
}

- AppDreamer

Answer 5

使用click事件和window.open方法导航到外部URL

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onClick()">Item 1</button>
  <button mat-menu-item (click)="onClick()">Item 2</button>
</mat-menu>

组件：

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

    @Component({
      selector: 'menu-overview-example',
      templateUrl: 'menu-overview-example.html',
      styleUrls: ['menu-overview-example.css'],
    })

     export class MenuOverviewExample {
      onClick()
{
  window.open("URL");

}}

在线演示

- Vikas

Answer 6

这将创建一个符合您要求的漂亮菜单图标，

<a style="cursor: pointer">
    <i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
    matTooltip="Menu">more_vert</i></a>

    <mat-menu #selectMenu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

您可以在STACKBLITZ上查看此代码的工作原理。

- INDRAJITH EKANAYAKE