问题标签 [mat-sidenav]

默认情况下 mat-drawer-container/mat-sidenav-container和mat-drawer/mat-sidenav高度基于mat-drawer-content/mat-sidenav-content，但我想设置mat-drawer高度基于它自己的内容和mat-drawer-container高度根据mat-drawer或mat-drawer-content中的哪一个来设置。我的垫子抽屉内容将根据用户输入动态变化，有没有直接的方法可以在有角度的材料中做到这一点？

下面的链接是一个演示应用程序，更加清晰。

i）当我使用 height:100vh 时，我通过滚动条获得全视图高度（这并不有趣）。

ii）如果我使用 host:mat-drawer-container:100px 它不接受 fit-content 或 100% 作为值并且不接受 max-height:500px。

iii) 试过 { provide: MAT_DRAWER_DEFAULT_AUTOSIZE, useValue: { autosize: true } } 但当 mat-drawer-content 为空并且 mat-drawer 中有一个项目列表时，垫子抽屉不可见。

https://stackblitz.com/edit/angular-mat-drawer-s1vgwr？

当我将组件放入mat-sidenav时，我无法获取路由参数

我对 Angular Material 中的垫子抽屉有疑问。我想将我的状态保存到 localstorage，但 mat-drawer 总是打开的。

Sidenav 在没有文本的情况下保持垫子图标时具有扩展部分和关闭扩展部分。当您单击底部按钮隐藏时，sidenav 为关闭，但在刷新页面后 Sidenav 再次展开（但在本地存储中已关闭）。

看起来像这样：

打开扩展垫抽屉

封闭式垫抽屉

Sidenav 已打开，但本地存储已关闭

你知道怎么解决这个问题吗？谢谢！

源代码：

app.component.html

app.component.ts

侧边栏服务.ts

对于基于角度材料的项目，我尝试根据用户的设备（台式机或手机）使用具有不同视图可能性的sidenav组件。到目前为止，它有效，但存在一些问题。即，一旦内容变长，内容就会翻倍滚动。

HTML结构：

使用诸如overflow: hidden在mat-sidenav-content元素上的 CSS 操作会切断不可见的内容，并将其应用于mat-sidenav-container元素根本不会影响它。

这是一个StackBlitz 示例

依赖版本：

• @角：9.1.12
• @角/材料：9.2.4

那么，我做错了什么？有谁知道如何解决这一问题？或者在角度项目中实现sidenav +工具栏的干净/更好的方式？任何帮助，将不胜感激！

当屏幕在桌面上时，我试图让我的主页有一个 mat-sidenav，但在平板电脑和移动设备上使用 mat-toolbar。完成这件事我没有问题。我遇到的问题是显示路由器插座。我希望两种布局都使用相同的路由器插座。我尝试了很多方法来完成这项工作，但结果始终是移动 mat-toolbar 是路由器插座工作的那个。这是我尝试过的几个片段。

尝试#1

app.component.html

尝试#2

分离出两个导航组件

side-nav.component.html

顶部导航组件.html

app.component.html

尝试#3

我还尝试将路由器插座添加到它自己的组件中，并替换了 app.component.html 中的路由器插座。

content.component.html

app.component.html

但它仍然只显示 mat-toolbar 。

有没有办法让它工作？

我知道这听起来像其他一些问题，但我没有使用子路线。相同的路由器内容显示在路由器插座的相应反应式设计中。

如果有类似的问题有答案，请分享链接，因为我还没有找到它。

我有以下 DOM 配置

在app-notificationmat-sidenav 内部的组件中，我想听滚动。以下是我的应用通知模板

在我的 app-notification.ts 中：

和

但是，无论我在 mat-side-nav 内滚动多少，都不会调用此订阅。文档说 CdkScrollable 指令在主机 elemnet 滚动上发出一个 observable。

返回在宿主元素上触发滚动事件时发出的 observable。

另一种选择是听scrollDispatcher。然而，问题是滚动调度程序在窗口滚动上发送事件，而不是专门在侧导航滚动上发送事件。

我似乎按照文档做的一切都很好。有人可以建议哪里出了问题。我特别想听听我的组件在侧导航组件中的滚动app-notification。我也不想听窗口滚动或说mat-side-nav-content滚动。

下面是我的html组件

这是我的 app.module.ts 文件

即使我声明了变量 isSideBarOpen，为什么我得到变量 isSideBarOpen 不存在错误。

我在 app.component.html 中使用角材料添加了工具栏和侧导航栏。

app.component.html

在 UI 中，它如下所示。

到目前为止，我的应用程序中只有一个组件，即应用程序组件。现在我想为主页左侧的每个按钮开发不同的组件。当用户单击任何按钮时，我想在这些按钮上显示相应的 html 模板。

我该如何实施？我感谢您的帮助。

Angular SideNav 的主要问题之一是除了 sidenav 之外的所有东西都必须在mat-sidenav-content.

我有一个特定于页面的过滤器部分，要实现为 sidenav。因此，我不希望应用程序的其余部分受到此更改的影响，因此需要单独的独立 sidenav。

为了克服这个问题，我创建了一个单独的组件，其中包含空mat-sidenav-content的并使用 css 管理 sidenav 视图（通过设置一些高度、白色背景色、阴影等）

我不确定这是否是正确的做法，但它至少允许我将它放在一个单独的组件下，而不是在 sidenav 内容中拥有路由器插座和应用程序的所有其他内容。

然而，问题是我无法使用(backdropClick)需要页面其余部分位于 mat-sidenav-content 下的事件，因为我希望在我们单击此组件外部时关闭 sidenav。

在尝试解决原始问题时，我是否朝着完全错误的方向前进，并最终遇到了可能不会出现的问题，如果我mat-sidenav像其他人一样使用过吗？

下面是我的代码，寻找建议

HTML

CSS

在组件中触发（基于行为主体） - 部分相关代码

试图让材料侧边栏打开两个多小时，结果发现，如果 sidenav-content 上没有设置高度，那么侧边栏根本没有打开。我的目标是让侧边栏的全高始终在左侧，而不是与内容的高度相同。40vh 的现状：SideNav 不是全高

有人知道为什么会这样，还是我的 sidenav 内容应该与现在不同？

应用标题看起来像这样