외부 URL에 대한 각도 매트 버튼 링크

외부 URL에 대한 각도 매트 버튼 링크

각도 6(https://angular.io/) new Project, Material Components(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단추와 같은 디자인으로

<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"와 같은 것을 하고 있다면, 당신은 당신의 브라우저에서 불필요한 빈 탭을 열게 될 것이다.나는 "위치"를 사용할 것을 제안한다.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'";
  }
}

사용하다clickevent and window.method를 열어 외부 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에서 이 코드가 어떻게 작동하는지 볼 수 있다.

참조URL: https://stackoverflow.com/questions/50544464/angular-mat-button-link-to-external-url