我正在包装角度材质菜单组件。我正在扩展MatMenuTrigger,MatMenuItem,将它们作为单独的指令并在父组件中使用它。在子组件(菜单组件)中,我只使用mat-menu获取引用和在父组件(Menu-demo组件)中,将菜单(在子组件中)附加到我们想要的任何控件。我不应该在子组件中使用button标签,所以我使用ng-content来获取来自parent的内容。我只是想暴露一些属性来获取该引用。这里我的问题是如何包装这个参考菜单,stackblitzlink。请提前帮助我,谢谢。
菜单指令不是必需的。您可以公开子MatMenu
并将其作为包含组件的属性引用,并直接将其与MatMenuTrigger
指令一起使用:
menu.component.ts:
@Component({
selector: 'sq-menu',
templateUrl: './menu.component.html',
})
export class MenuComponent {
@ViewChild('menu') matMenu: MatMenu;
}
menu.component.html:
<mat-menu #menu="matMenu">
<ng-content></ng-content>
</mat-menu>
用法:
<button mat-raised-button [matMenuTriggerFor]="menu.matMenu">home</button>
<sq-menu #menu>
<button mat-button>
Item1
</button>
</sq-menu>