Question

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

Answer 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

角形材料的包装菜单组件6

1 个答案: