Откройте меню угловых материалов программно с помощью ViewChild на MatMenuTrigger - PullRequest
Новая
       19

Откройте меню угловых материалов программно с помощью ViewChild на MatMenuTrigger

0 голосов
/ 15 декабря 2018

Как меню Angular Material можно открыть программным способом, используя переменную шаблона ссылки при нажатии кнопки, доступ к которой осуществляется в компоненте с помощью ViewChild?

Меню обычно открывается при щелчке, но я хочу открыть его программнопри наведении мыши.

(mouseover) Обработчик событий выдает ошибку: Не удается прочитать свойство 'openMenu' из неопределенного.

Так почему clickHoverMenuTrigger не определен в компоненте?

Вот этот компонентhtml 

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
  #clickHoverMenuTrigger (mouseover)="openOnMouseOver()">
  <mat-icon>notifications</mat-icon>
</button>

Вот машинописный текст компонента 

@ViewChild(MatMenuTrigger) clickHoverMenuTrigger: MatMenuTrigger;

openOnMouseOver() {
  this.clickHoverMenuTrigger.openMenu();
}

Этот метод документирован здесь https://material.angular.io/components/menu/overview

Та же проблема возникла и получила ответ здесь Как получить доступтриггер меню mat из машинописного текста (у меня нет репутации, чтобы комментировать это)

Похоже, я делаю именно то, что указано в документации и решении StackOverflow выше.

Поскольку clickHoverMenuTrigger не определен, это должно быть проблемой с @ ViewChild.

Код для Stackblitz .Откройте консоль, чтобы увидеть ошибку.

1 Ответ

0 голосов
/ 15 декабря 2018

Просто измените @ViewChild на 

@ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger;

Общий код должен быть: 

<h1>2 buttons, 2 Menus</h1>

<ol>
  <li>Standard Material Button opens menu on click </li>
  <li>Same, but with event handler to open menu on mouseover</li>
</ol>

<button mat-icon-button [matMenuTriggerFor]="clickMenu"
  #clickMenuTrigger="matMenuTrigger">
  <mat-icon>touch_app</mat-icon>
</button>

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
  #clickHoverMenuTrigger="matMenuTrigger" (mouseover)="openOnMouseOver()">
  <mat-icon>notifications</mat-icon>
</button>

<mat-menu #clickMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<mat-menu #clickHoverMenu="matMenu">
  <button mat-menu-item>New items</button>
</mat-menu>

ts: 

export class AppComponent {

  @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger;

  openOnMouseOver() {
    this.clickHoverMenuTrigger.openMenu();
  }
}

DEMO

...