B. *_*rez 5 typescript material-design angular-material bootstrap-4 angular
我使用 Angular 5 和 Material 设计。我有一个有角度的材质导航抽屉迷你变体作为我的应用程序的侧面导航菜单（见图） 使用顶部的箭头，我们隐藏了项目，只留下图标。
我想要做的是为一些菜单项添加子菜单。
当菜单折叠时，我们会出现一个带有子菜单链接的弹出框： menu popover
当菜单展开时，我们会有一个箭头来展开菜单下的子菜单：带子菜单的 菜单展开
我找到了几个解决方案，但没有一个完全做到这一点。这里有一些链接： Angular Material Tree
Bootstrap popover，但我更愿意在 Angular Material 中找到类似的东西。
有人知道如何实现这一目标吗？
在此先感谢您的帮助，
贝戈尼亚
也许这个答案可以是评论，但由于文本大小限制和可见性的原因，我将其写在这里。
坏消息是，目前 Material 本身还没有提供官方的方法来实现这一点。
但好消息是我找到了一个很好的解决方法。我在下面向您解释我是如何管理它的：
在您的应用程序中实现此材料标准菜单（请参阅 stackblitz 页面底部的最后一个示例）**，以此实时示例isExpanded为例，通过其相对图标/文本排除来管理值
然后使用ngClassisExpanded指令根据将设置为 的值width有条件地添加自定义类N px !important，其中“N”是自定义值。
!important需要覆盖默认值。
现在，最困难的部分是弹出窗口。您可以使用这个库弹出窗口，或者也许这个库的一个。覆盖定位和颜色值的 CSS 定制是必须的。
要编辑和覆盖库标签和类属性，请使用::ng-deep前缀 (EG:: ::ng-deep ngb-popover-window { /* customization here */ })。
让它越过材质侧导航的唯一方法是使用 css 覆盖，但这是一个雷区，风险是搞乱当前的应用程序布局。
弹出窗口的一个很好的替代方案（而且它也更容易实现）可能是在鼠标悬停时更改菜单宽度以显示第二列，其中将包含子部分链接...
我在这里看到过类似的东西，但这只是为了获得想法。
对于菜单内容，请考虑根据isExpanded值使用不同的行为复制代码，以便您可以“轻松”管理树视图和弹出子菜单视图。
来源：我现在正在做这个
希望它会有所帮助！
| 归档时间： |
|
| 查看次数： |
2406 次 |
| 最近记录： |
