Angular 9：自定义组件一个有效的mat-menu-item。

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 (" Help [ERROR ->] "): ng:/AppModuleAppComponent.html@3:4。

见演示。https:/stackblitz.comeditangular-9-material-starter-hfdrwr?file=src%2Fapp%2Fapp.component.ts。

这是有可能的，让一个自定义组件成为一个有效的mat-menu-item？

Answer 1

你希望你的组件表现得像一个MatMenuItem，为了实现这个目标，你的自定义组件应该从MatMenuItem扩展。

这里 是Angular Material的一个例子的链接。它是针对不同的组件类型。但我很确定你要采取的步骤是一样的。也请检查 MatFormField的API 例子中使用的，也是 MatMenu的API 比较并创建您的自定义组件