web-dev-qa-db-ja.com

angular外部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>

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

私は初心者として明らかな何かを見逃していると思いますが、私の質問への答えを見つけることができません。

angulartypescriptangular-material
12
PCorruthers

ボタンの同じデザインで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>
14
Takatalvi

外部URLに向かうボタンには次のようなものを使用します。

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

使用できます

<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

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");

}}

LIVE DEMO

0
Vikas

これにより、要件に応じて素敵なメニューアイコンが作成されます。

<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 [〜＃〜] で確認できます。

0
Indrajith Ekanayake