gpt4 book ai didi

typescript - Angular Material 6 的包装菜单组件

转载 作者:行者123 更新时间:2023-12-05 02:15:18 24 4
gpt4 key购买 nike

我正在包装角度 Material 菜单组件。我正在扩展 MatMenuTrigger、MatMenuItem,使它们成为单独的指令并在父组件中使用它。在子组件(菜单组件)中,我只使用 mat-menu 获取引用,在父组件(菜单演示组件)中,将菜单(在子组件中)附加到我们想要的任何控件。我不应该在子组件内使用按钮标签,所以我使用 ng-content 从父组件获取内容。我只想公开一些属性来获取该引用。我的问题是如何包装这个引用菜单,stackblitzlink .请帮我解决这个问题,在此先感谢。

最佳答案

菜单指令不是必需的。您可以公开子 MatMenu 并将其作为包含组件的属性引用,并直接与 MatMenuTrigger 指令一起使用:

菜单.component.ts:

@Component({
selector: 'sq-menu',
templateUrl: './menu.component.html',
})

export class MenuComponent {
@ViewChild('menu') matMenu: MatMenu;
}

菜单.组件.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

关于typescript - Angular Material 6 的包装菜单组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52183112/

24 4 0