指向外部 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 {}

實時編輯： https ://stackblitz.com/angular/maeymnkvlrq

我相信我作為新手遺漏了一些明顯的東西，但我無法找到我的問題的答案。

Answer 1

您可以將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 2

對指向外部 URL 的按鈕使用類似這樣的內容：

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

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>

演示堆疊閃電戰

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'";
  }
}

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");

}}

現場演示

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 中看到這段代碼是如何工作的