问题标签 [mat-sidenav]

我目前正在尝试将 mat-sidenav 实施到一个项目中。除了一种情况外，一切似乎都运行良好：如果我在浏览器中本地运行应用程序，然后将包含应用程序的窗口选项卡拉开并放开它（基本上是强制它调整大小很多次），这会导致它在新的单独的浏览器窗口中打开。当前页面看起来也不错，sidenav正如预期的那样在一边。

但是，当我导航到另一个页面时，该页面的内容会位于侧导航下方。我也尝试设置 autosize=true ，这有助于在某种意义上说，如果我导航出页面并返回，它会自行恢复到它应该看起来的样子，即左侧的 sidenav 和右侧显示的页面内容.

我也尝试过设置超时，然后强制打开和关闭侧导航，但这似乎无济于事。也许有办法强制刷新其他页面？侧导航代码是它自己的独立组件，如果这有助于阐明情况。粘贴代码的样子：

编辑：我在调整大小事件上运行了一些console.logs，由于某种原因，经过几次尝试，它开始触发 3-6 个调整大小事件而不是 2 个，而这正是导航栏开始与内容重叠的时候。在此之前它按预期工作（左侧的导航栏和右侧的内容）。另一个有趣的事情是，在 chrome 调试器中，当它工作时，console.logs 被组合在一起（只有一个实例出现在它旁边的数字），但是当它开始像上面提到的情况一样失败时，所有的即使消息完全相同，console.logs 也会出现在不同的行上。请注意，此时没有其他任何内容写入控制台。抱歉，如果编辑没有帮助，但我想我会尽可能多地提供线索。如果我弄清楚了，我也会发布答案，

编辑#2：当我离开当前页面时，此行为开始。因此，要复制它，启动应用程序，拉出标签并调整大小几次，然后离开页面（我通过单击侧导航栏上的链接来完成）并返回，并重复调整大小再次，这一次当您导航到另一个页面时，它将被覆盖，转到另一个页面并返回，它将自行重置到预期位置

使用mat-sidenavAngular Material 我遇到了固定定位元素的问题，并根据元素内的居中内容将其居中mat-sidenav-content。

一种可能的解决方案可能是计算滚动条的宽度并使用它来相应地对齐固定元素，但这似乎有点难看。

我准备了一个 Stackblitz 来说明这个问题：https ://stackblitz.com/edit/angular-u9ucr6

目标是让两个有色元素都相对于 的滚动条居中mat-sidenav-content。

有任何想法吗？

我正在尝试将 . 问题是我试图应用的任何规则都不会改变任何东西。如果我将 fxFlex 规则添加到一切似乎都可以正常工作。我试图为每个元素应用规则，但仍然没有任何线索。

没有任何规则的sidenav代码：

屏幕

我希望在其中有一个固定元素，mat-sidenav-content同时仍然允许用户在鼠标悬停在固定元素上时滚动其后面的内容。

这是一个 stackblitz 示例：https ://stackblitz.com/edit/angular-khterh?file=src%2Fapp%2Fapp.component.html

请注意，当您的光标位于divs 列表上时，它们会按预期滚动，但如果您的光标越过固定元素，您将无法滚动。

我想避免简单地添加pointer-events: none到固定元素，因为最终会有交互功能。左侧导航应该留在原处。

这篇 SO 帖子中讨论的解决方案似乎很相关，但我无法在这里成功实施它们。

如何在组件中调用角度材质 sidenav 动作？我有一个用例，sidenav 只能在callMethods()方法触发时打开/关闭。我也不能简单地传入open(e)（callMethods()需要 1 个参数）。有没有办法做到这一点？

应用程序.html

应用程序.ts

注意：我注意到有一个帖子但不清楚

Material.io 网站有一个很好的侧导航栏，其中包含可点击的标题项、可点击的子项和子项右侧的进度条。

是否有准备好的角度组件或准备好的角度代码片段来制作相同的侧导航栏？没有人在角度上这样做吗？谢谢。

我正在研究 Angular 8 和 Angular 材料，但我被困在我想在 sidenav 旁边显示我的内容或（组件）的地方，即当单击侧面菜单中的任何链接时主屏幕。这是我的一段代码

stackblitz 的链接My_link

除了 App 组件，我还有 3 个组件

1. 标题组件
2. 侧边栏组件
3. 链接内容组件

SidebarCompoment.html

边栏组件.css

应用程序路由.module.ts

app.component.html

我还提供了 stackblitz Stackblitz-link 的链接

所以在这里我的问题是当我单击侧菜单中的任何链接时，我想在主屏幕中加载 LinkContent 组件，非常靠近侧菜单和标题下方。所以我应该怎么做。现在当我单击链接组件时如图所示，加载在侧边栏组件下方。任何帮助将不胜感激

我尝试制作最简单的可折叠左侧导航栏，
但它不会粘在左侧，而是被填充
，因此它最终位于页面中间。

没有CSS。
填充量取决于单词“Overview”的长度。

我正在寻找一种在 MatDialog 上显示 MatSidenav 的解决方案。我的项目，移动优先，由左右两个侧导航构建，用于推送内容。

在底部，有一个固定的页脚，可以打开左侧或右侧的sidenav。

在主要内容中，我需要使用 MatDialog。

我的目的是能够打开 MatDialog，并能够打开左侧导航，因为我想检查一些关于我的帐户的信息，然后关闭它以返回对话框，仍然打开。

现在，对话框总是显示在内容之上。

这是一个Stackblitz来清楚地解释我的问题：

重现案例：

• 点击“选择一个”按钮
• 对话框打开
• 在页脚中，单击“打开左侧菜单”
• 左侧sidenav推送主要内容但显示在对话框下方

除了 MatDialog 的 Z 位置及其关联覆盖之外，一切都像我想要的那样工作，最好的办法是“推动”它，就像对主要内容一样。

理想的做法是找到一种将对话框及其覆盖“附加”到主要内容的方法。我找到了一种使用 Angular 4.4 的方法，但是对于像 Angular 8 这样的较新版本，这似乎不起作用。

当我将click事件放在mat-sidenav-content <mat-sidenav-content (click)="isNavBarOpened=false"> 上时，mat-slide-toggle内部不起作用。

这是示例