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 {}
Live Edtior:https://stackblitz.com/angular/maeymnkvlrq
我相信我错过了一些明显的新手,但无法找到我的问题的答案。
答案 0 :(得分:10)
使用类似这样的内容来指向外部网址:
<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>
答案 1 :(得分:7)
您可以使用相同的按钮设计将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>
答案 2 :(得分:2)
您可以使用
<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>
答案 3 :(得分:1)
使用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'";
}
}
答案 4 :(得分:0)
使用click
事件和 window.open 方法导航到外部网址
<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");
}}
<强> LIVE DEMO 强>
答案 5 :(得分:0)
这将根据您的要求创建一个漂亮的菜单图标
<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