Angular材料6的包装菜单组件答案

【问题标题】：Wrapping Menu Component of Angular material 6Angular材料6的包装菜单组件
【发布时间】：2019-02-10 11:31:19
【问题描述】：

我正在包装角度材质菜单组件。我正在扩展 MatMenuTrigger、MatMenuItem，将它们作为单独的指令并在父组件中使用。在子组件（Menu 组件）中，我仅使用 mat-menu 获取引用，在父组件（Menu-demo 组件）中，将菜单（位于子组件中）附加到我们想要的任何控件。我不应该在子组件内使用按钮标签，所以我使用 ng-content 从父组件获取内容。我只想公开一些属性来获取该引用。我的问题是如何包装这个参考菜单stackblitzlink。请帮我解决这个问题，在此先感谢。

【问题讨论】：

标签： typescript angular6 angular-directive angular-material-6

【解决方案1】：

菜单指令不是必需的。您可以公开子 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>

StackBlitz

【讨论】：

感谢您的回复，这里我不应该将它用作包装组件中的 matMenuTriggerFor，它应该用其他名称示例包装：sqMenuTriggerFor 及其值也是 menu.someMenu 而不是 mat-menu。我需要通过保留相同的功能来包装它
为什么要做一些你不需要的事情？目前尚不清楚您为什么需要这样做。