角垫按钮链接到外部网址

Question

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

<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>

演示 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 protected]?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>

你可以看到这段代码是如何工作的 堆栈闪电战

Answer 7

我创建了 ngx-href 库来正确处理此类棘手的问题。

你只需要

1. npm i ngx-href

2. 将模块导入到您的

   app.module.ts

   文件中

import { NgxHrefModule } from 'ngx-href'
imports: [
  NgxHrefModule.forRoot({}),
]

3. 导入指令

import { NgxHrefDirective } from 'ngx-href'

imports: [
  NgxHrefDirective,
]

4. 然后您可以使用

   mat-button

   和

   href

   打开外部网址

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item href="https://external-url.com">Item 1</button>
  <button mat-menu-item href="https://external-url.com">Item 2</button>
</mat-menu>

如果您有内部 url，库将使用 Angular 路由器系统处理它；）