角度mat-button链接到外部URL

Question

Angular 6(https://angular.io/)新项目,利用材料组件(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>

打字稿

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

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

 export class MenuOverviewExample {}

现场Edtior:https://stackblitz.com/angular/maeymnkvlrq

我相信我错过了一些明显的新手,但无法找到我的问题的答案.

Answer 1

使用类似的东西作为外部URL的按钮:

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

Answer 2

您可以使用相同的按钮设计将button属性更改a为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>

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>

演示 Stackblitz

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:email-address@gmail.com?subject='I need help'&body='write some message'";
  }
}