角度mat

角度mat-button链接到外部URL(angular mat-button link to external url)

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

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

Angular 6 (https://angular.io/) new Project, utilizing the Material Components (https://material.angular.io/) ~ How can I navigate to an external URL from a mat-button component.

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>

Typescript

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

I believe I am missing something obvious as a novice but am unable to find an answer to my question.

最满意答案

您可以使用相同的按钮设计将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> 
  
 
You can change the button attribute to an a with the same design of a button
 
 
 
  
  
<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>