问题标签 [mat-drawer]

我正在尝试使用 Angular 8 中 MatDrawer 类型的属性通过组件文件设置 MatSideNav 的行为

打字稿代码：

HTML 代码：

控制台错误：

请帮助我如何MatDrawer使用@ViewChild

我在div使用position: sticky;inside时遇到问题mat-drawer-container。这是我尝试过的：

没有运气:(

有什么想法吗？

这不起作用

https://stackblitz.com/edit/angular-aqk1oj-pg4xq8

这有效（期望的结果）

https://stackblitz.com/edit/angular-aqk1oj

默认情况下 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？

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

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

看起来像这样：

打开扩展垫抽屉

封闭式垫抽屉

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

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

源代码：

app.component.html

app.component.ts

侧边栏服务.ts

[hasBackdrop]=true我正在尝试mat-drawer-container使用多个mat-drawers. 我的html结构是这样的：

使用一个抽屉，在折叠抽屉hasBackdrop外点击即可完美工作。mat-drawer-container但是由于我添加了另外两个，所以我不再有可用的背景。

在文档中它说

@Input() hasBackdrop: 任意 | 当其中一个侧导航打开时，抽屉容器是否应该有背景。如果显式设置为 true，则在侧面模式下也将为抽屉启用背景。

有人有类似的问题吗？我应该打开一个新问题吗？

提前致谢。

ps：英语不好，抱歉

在 chrome 中下载后，会出现下载栏并且侧边栏已关闭。我该如何解决？

chrome中的下载栏示例

在垫抽屉容器内使用多个抽屉后，背景被禁用，抽屉一个接一个地打开。下面是结构。

昨天我的应用程序滚动出现问题。我正在使用 Angular Material，并且我在以下区域组织了一个布局：

• mat-toolbar在页面顶部；
• mat-drawer在页面左侧用于导航；
• mat-drawer-content我有我的路由器插座。

为了更好地观察，我给我的 mat-drawer-content 设置了一个 32px 64px 值 ( padding: 32px 64px;) 的填充样式。我认为这是我的问题的主要问题，因为当我删除此填充时，滚动工作正常，并在页面末尾显示所有内容。应用填充时，我的 mat-drawer-container 的高度始终小于 mat-drawer-content。

我发现解决这个问题的唯一方法是使用溢出：覆盖；对于 mat-drawer-content，但问题仍然存在，因为我有一个使用这种填充配置的双滚动，当一个滚动向下时，我仍然需要将另一个滚动到底部（这会导致糟糕的用户体验） .

如果我应用边距而不是填充，也会发生同样的情况，所以我的问题是：有没有办法在 mat-drawer-content 中提供良好的填充/边距而不会弄乱内容区域中的滚动？

我的 HTML 结构：

我的 CSS：

整个目标是滚动到某个页面的顶部按钮。实际滚动有效，但该按钮未显示在页面滚动上。

最初，我使用纯 Javascript 调用可滚动的 mat-drawer-content 容器： document.getElementsByClassName('mat-drawer-content')[0] 并不断调用它以在鼠标悬停时更新本地 scrollingContainer 变量。有人告诉我我不能使用鼠标悬停，因为这在移动设备上效果不佳。

目前，我正在尝试“@ViewChild('tryMe') tryMe: ElementRef;” 在 mat-drawer-content 滚动容器上，并通过 NGRX 将其传递给我的页面组件。结果仍然相似。

在我将鼠标悬停在提示工具上或单击按钮之前，此按钮保持不可见。scrollToTop 在顶部绝对是 0。当我调用 Javascript 命令时，该值确实会发生变化。

感觉那么近，却又那么远。所以任何帮助将不胜感激。

我希望“设置”抽屉像在此设置页面上一样响应窗口调整大小。看看他们的样式元素，我可以看到很多 mat-drawer css 类（我认为）处理抽屉的状态和事件：

mat-drawer mat-drawer-side mat-drawer-open等等

这些css类是否有关于它们如何运作的文档？它们甚至是材料类吗？

尝试这个，我会无知地期望侧导航默认打开而不使用openedonmat-drawer但它不起作用。

我想用类似他们的方法来实现这个抽屉功能，而不使用像这样的 Angular HostListener 装饰器。