Как открыть мат-меню из другого компонента с помощью сервиса?

Question

Привет, ребята, у меня есть два компонента, оба они братья и сестры, по этой причине мне нужно использовать сервис, но я не знаю, как отправить экземпляр [MatMenuTriggerFor] в мой другой компонент. Любая помощь?

Это код одного из моих navBar.component, где у меня есть логи c, чтобы открыть мое меню, но отсюда.

<li class="nav-item">
        <a class="nav-link" id="categorias" [matMenuTriggerFor]="clickHoverMenu" #clickHoverMenuTrigger="matMenuTrigger"
          (mouseover)="openOnMouseOver($event)">
           Categorias 
            </a>
</li>

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

<mat-menu #clickHoverMenu='matMenu'>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Спасибо за вашу помощь

Answer 1

<mat-expansion-panel [expanded]="expanded">

Работает для панели расширения. То же самое относится и к меню. Тогда прочитайте эту статью для централизованного обслуживания событий

Answer 2

Сначала вам нужно установить sh ссылку на ваш MatMenuTrigger. Вы можете выполнить sh, используя @ViewChild. Затем вы можете emit закрытие / открытие с помощью EventEmitter<T>

примера (https://stackblitz.com/edit/angular-u5gkff?file=src%2Fapp%2Fcomp2%2Fcomp2.component.ts)

Сервис

@Injectable({ providedIn: 'root' })
export class MyserviceService {
  public menuEmitter: EventEmitter<boolean>;
  constructor() {
    this.menuEmitter = new EventEmitter<boolean>();
  }
  open(): void {
    this.menuEmitter.emit(true);
  }
  close(): void {
    this.menuEmitter.emit(false);
  }
}

Затем в любом компоненте, из которого вы хотите вызвать меню:

export class Comp1Component implements OnInit {
  private readonly _myService: MyserviceService;
  constructor(myService: MyserviceService) {
    this._myService = myService;

  }

  ngOnInit() {
  }
  open(): void {
    this._myService.open();
  }
}

Фактический компонент с MatMenu

export class Comp2Component implements OnInit {
  private readonly _myService: MyserviceService;
  @ViewChild('menuTrigger') matMenuTrigger: MatMenuTrigger;
  constructor(myService: MyserviceService) {
    this._myService = myService;
    this._myService.menuEmitter.subscribe(this.toggleMenu.bind(this));
  }

  ngOnInit() {
  }
  toggleMenu(state: boolean): void {
    this.matMenuTrigger.openMenu();
  }
}

<button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" >Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>