带有子菜单的 Angular Material sidenav mini 变体

Question

我使用 Angular 5 和 Material 设计。 我有一个 Angular Material navigation drawer mini variant作为我的应用程序的侧面导航菜单 ( see image ) 通过顶部的箭头，我们隐藏了项目，只留下图标。

我想做的是为一些菜单项添加子菜单。

当菜单折叠时，我们会出现一个带有子菜单链接的弹出窗口: menu popover

当菜单展开时，我们会有一个箭头来展开菜单下的子菜单: menu expanded with children

我找到了几个解决方案，但没有一个能完全做到这一点。这里有一些链接: Angular Material Tree

Dynamic nested menu using Angular Material

Bootstrap popover ，但我更愿意在 Angular Material 中找到类似的东西。

And this similar question

有人知道如何实现这一点吗？

预先感谢您的帮助，

贝戈尼亚

Answer 1

也许这个答案可以是评论，但出于文本大小限制和可见性的原因，我将其写在这里。

坏消息是，目前 Material 还没有官方的方式来原生提供它。

但好消息是我找到了一个不错的解决方法。我将在下方向您解释我是如何管理它的:

---

1. 实现 this material standard menu (请参阅 stackblitz 页面底部的最后一个示例)在您的应用中**，以 this live example 为例使用相关图标/文本排除管理 isExpanded 值

2. 然后使用ngClass指令根据 isExpanded 值有条件地添加自定义类，将 width 设置为 N px !important，其中“N”是自定义值(value)。

   !important 需要覆盖默认值。

3. 现在，最困难的部分是弹出窗口。你可以使用 this library弹出窗口，或者可能是this library's one .覆盖定位和颜色值的 Css 自定义是必须的。

   要编辑和覆盖库标签和类属性，请使用 ::ng-deep 前缀(例如:::ng-deep ngb-popover-window {/* 自定义这里 */)。

   让它通过 material sidenav 的唯一方法是使用 css 覆盖，但这是一个雷区，风险是弄乱当前的应用程序布局。

   弹出窗口的一个很好的替代方法(它也更容易实现)可能是在鼠标悬停时更改菜单宽度以显示第二列，其中将包含子部分链接...

   我见过类似的东西 here ，但这只是为了获得想法。

4. 对于菜单内容，考虑使用不同的代码复制您的代码 行为取决于 isExpanded 值，因此您可以“轻松” 管理 TreeView 和弹出式子菜单 View 。

来源:我现在正在做这件事

希望对您有所帮助!