eckige Matte-button-link zu externer url

Winkel 6 (https://angular.io/) neues Projekt, die Verwendung der Einsatzmaterialien (https://material.angular.io/) ~ Wie kann ich navigieren Sie zu einer externen URL von einem mat-button-Komponente.

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>

Typoskript

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

Ich glaube, ich bin fehlt etwas, das offensichtlich als ein Anfänger, aber bin nicht in der Lage zu finden, eine Antwort auf meine Frage.

InformationsquelleAutor PCorruthers | 2018-05-26
  1. 15

    Können Sie ändern Sie die button Attribut zu einer a mit dem gleichen design eine Schaltfläche

    HTML:

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

    InformationsquelleAutor Takatalvi
  2. 18

    Verwenden Sie so etwas wie dies für eine Schaltfläche, die in Richtung auf eine externe URL : 

    <a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>
    • Ich danke Ihnen sehr!
    InformationsquelleAutor Al Caulique
  3. 2

    Können Sie

    <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

    InformationsquelleAutor Sajeetharan
  4. 0

    Verwenden click Ereignis und Fenster.öffnen Methode, navigieren Sie zu externer 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>

    Komponente:

      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

    InformationsquelleAutor Vikas
  5. 0

    Dadurch wird ein schönes Menü-Symbol mit Ihrer Anforderung, 

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

    Können Sie sehen, wie dieser code funktioniert in
    STACKBLITZ

    InformationsquelleAutor Indrajith Ekanayake
Schreibe einen Kommentar