我使用Angular 5和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中找到类似的内容。
有人知道如何实现这个目标吗？
先谢谢你的帮助，
贝戈尼亚
答案 0 :(得分：0)
也许这个答案可能是一个评论，但由于文字大小限制和可见性的原因，我在这里写。
坏消息是，目前还没有官方的方式来实现原材料提供。
但好消息是，我找到了一个不错的解决方法。我向您解释我如何管理 ：
在您的应用中实施this material standard menu（请参阅stackblitz页面底部的最后一个示例），以this live example为例来管理isExpanded值其相对图标/文字排除
然后使用ngClass指令有条件地在isExpanded值上添加自定义类，将width设置为N px !important，其中＆＃34; N＆ ＃34;是一个自定义值。
!important需要覆盖默认值。
现在，最困难的部分是流行音乐。您可以使用this library个弹出窗口，也可以this library's one。用于覆盖定位和颜色值的Css自定义是必须的。
要编辑和覆盖库标记和类属性，请使用::ng-deep前缀（E.G :: ::ng-deep ngb-popover-window { /* customization here */ }）。
让它越过材料sidenav的唯一方法是使用css覆盖，但它是一个非常雷区，风险是弄乱当前的应用程序布局。
pop-over的一个很好的替代方案（它也更易于实现）可以在鼠标结束时更改菜单宽度，以显示包含子节链接的第二列...
我已经看过类似的here，但这只是为了获得想法。
对于菜单内容，请考虑使用不同的代码复制代码
行为取决于isExpanded值，因此您可以轻松地＆＃34;
管理树视图和弹出子菜单视图。
消息来源：我现在就这样做
希望它会有所帮助！
答案 1 :(得分：0)
我知道这很晚了，但是对于该解决方案来说，它有一个更好的解决方法，即不那么麻烦https://www.npmjs.com/package/angular-material-rail-drawer。您要做的就是添加模块，然后将mode设置为rail（这是material.io中仅图标菜单的名称）
演示： https://stackblitz.com/edit/angular-material-mini-variant
