[英]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 {}
实时编辑: https ://stackblitz.com/angular/maeymnkvlrq
我相信我作为新手遗漏了一些明显的东西,但我无法找到我的问题的答案。
您可以将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>
对指向外部 URL 的按钮使用类似这样的内容:
<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>
您可以使用
<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>
使用 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'";
}
}
使用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");
}}
这将根据您的要求创建一个漂亮的菜单图标,
<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 中看到这段代码是如何工作的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.