Angular 9: пользовательский компонент допустимый элемент меню mat

Question

Я хочу использовать пользовательский компонент в MatMenu как MatMenuItem:

import { Component } from '@angular/core';

@Component({
  selector: 'my-custom-item',
  template: `<button>CustomItem</button>`
})
export class CustomItemComponent {}

@Component({
  selector: 'my-app',
  template: `
  <mat-menu>
    <button mat-menu-item>Foo</button>
    <my-custom-item mat-menu-item>Bar</my-custom-item>
  </mat-menu>
`,
})
export class AppComponent  {}

Но возникает исключение:

Ошибки синтаксического анализа шаблона: этому элементу соответствует несколько компонентов , Убедитесь, что только один компонент выбора может соответствовать данному элементу. Конфликтующие компоненты: MatMenuItem, CustomItemComponent («Справка [ОШИБКА ->]»): ng: ///AppModule/AppComponent.html@3: 4

см. Демонстрационную версию: https://stackblitz.com/edit/angular-9-material-starter-hfdrwr?file=src%2Fapp%2Fapp.component.ts

Можно ли сделать пользовательский компонент допустимым элементом mat-menu?

Answer 1

Вы хотите, чтобы ваш компонент вел себя как MatMenuItem, чтобы добиться того, чтобы ваш пользовательский компонент расширялся от MatMenuItem.

Здесь - это ссылка на пример из Angular Material. Это для другого типа компонента. Но я уверен, что шаги, которые вы должны предпринять, одинаковы. Также проверьте API MatFormField , использованный в примере, а также API MatMenu , чтобы сравнить и создать свой пользовательский компонент