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.
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>
对指向外部 URL 的按钮使用类似这样的内容:
<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>
You can use
<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>
Using window.open will work, but if you are doing something like "mailto", you will end up with a unnecessary blank tab opening in your browser. I suggest using "location.href = " instead... so... in short... whether it's a button or a menu doesn't matter, in your HTML,
<button mat-raised-button (click)="emailSupport()" style="width:180px;">
Contact Support
</button>
Then in your .ts file...
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'";
}
}
Use click
event and window.open Method to navigate to external 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>
Component:
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");
}}
This will create a nice menu icon with your requirement,
<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>
You can see how this code works in STACKBLITZ
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.