Javascript 角度9：自定义元件有效的mat菜单项

我想在MatMenuItem中使用自定义组件作为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  {}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的自定义项”，
模板：`CustomItem`
})
导出类CustomItemComponent{}
@组成部分({
选择器：“我的应用程序”，
模板：`
福
酒吧
`,
})
导出类AppComponent{}

但它提出了一个例外：

模板分析错误：此模板上有多个组件匹配 要素确保只有一个组件的选择器可以匹配 给定元素。冲突组件：MatMenuItem、CustomItemComponent （“救命 [错误->] “”：ng:///AppModule/AppComponent。html@3：4

请参见演示：

---

是否可以将自定义组件设置为有效的mat菜单项？

您希望组件的行为类似于MatMenuItem，以实现自定义组件应该从MatMenuItem扩展

---

是指向角度材质示例的链接。它适用于不同的组件类型。但我确信你必须采取的步骤是一样的。同时检查示例中使用的代码，并比较和创建您的自定义组件

您可以向我们展示您的自定义组件代码吗？这是一个问题。。。。