web-dev-qa-db-fra.com

lien mat-bouton angulaire vers une URL externe

Angular 6 ( https://angular.io/ ) nouveau projet, utilisant les composants matériels ( https://material.angular.io/ ) ~ Comment accéder à une URL externe à partir composant mat-button. 

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>

Manuscrit

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

Je pense qu’il me manque quelque chose d’évident en tant que novice, mais je suis incapable de trouver une réponse à ma question. 

angulartypescriptangular-material
3
PCorruthers

Vous pouvez changer l'attribut button en a avec le même design de bouton

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

5
Takatalvi

Utilisez quelque chose comme ceci pour un bouton vers une URL externe: 

<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>
6
Al Caulique

Vous pouvez utiliser

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

DEMO STACKBLITZ

2
Sajeetharan

Utilisez les événements click et window.open pour accéder à une URL externe

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

Composant:

  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

0
Vikas