问题标签 [mat-sidenav]

我有下一个代码：

此表达式发生错误 [style.position]="sidenav.mode !== 'push' && sidenav.opened ? 'relative' : 'absolute'"：

错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“绝对”。当前值：“相对”。

如果我放，则不会发生错误，opened但是默认情况下我无法在响应中关闭菜单。

stackblitz 中的链接在这里

将边距应用于 mat-sidenav 分离的正确方法是什么？现在我正在使用下面的代码。Angular Material 在其 API 中有推荐的方式吗？

我在这里看不到，https://material.angular.io/components/sidenav/api

我正在尝试使以下角度材料布局正常工作。我有一个mat-toolbar在顶部和mat-sidenav底部。无论我尝试什么，我都无法mat-sidenav-container占据整个页面高度。这是我使用网格布局的尝试。看起来它应该工作，但它没有。似乎mat-sidenav自动缩小到内部元素的高度mat-sidenav-content。

这是我的html：

这是我的CSS：

我正在尝试在 StackBlitz 中运行一个有角度的应用程序。它工作正常，直到我尝试添加一个mat-sidenav-container. 然后应用程序开始失败，控制台中显示以下错误：

这是相关 StackBlitz 的链接：https ://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html

这是html代码。如果我注释掉指定的部分，它会起作用。我如何让它工作？谢谢。

请参阅以下 StackBlitz 以了解相关应用程序：https ://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html

目前，当页面溢出时，我最终会在右侧滚动条，它跨越标题区域（mat-toolbar放置位置）和内容区域（mat-sidenav-content放置位置）。如下所示：

相反，我想要的是滚动条仅显示在内容区域中，如下所示。我希望标题和左侧菜单保持固定（当用户在溢出的内容中上下滚动时不要移动）：

我用材料做了一个侧导航栏，现在我只能看到导航栏，其他任何东西都消失了！！！添加了 ng add @angular-material 并将所有导入添加到 app.module.ts - 并将应用组件导入到模块 ts 侧导航工作正常，但页面的所有主体都消失了！！！不知道为什么...

我检查了 brosser 工具，项目在那里 - 参见图 3，但我看不到它们，参见图 2 和图 1 找不到问题 - 感谢所有帮助者 :) 参见 ditails

[

我正在为我的侧面导航抽屉栏和主要内容使用有角度的材料 sidenav。当我单击侧栏的关闭按钮时，整个侧导航栏（抽屉内容）被关闭。但我希望它仍然以较小的宽度显示，并将侧抽屉的内容更改为只显示垫子图标。

我该怎么做，即侧边栏不应该完全关闭，它应该只是宽度更小，只显示图标？任何帮助，将不胜感激。

我正在寻找在 Angular (13.0.x) Material 页面框架中自动重新缩放元素的最佳当前方法。

我有一个静态<mat-toolbar>作为标题，以及一个<mat-sidenav-container>列出<mat-sidenav>的元素和<mat-sidenav-content>，如下所示：

我希望<mat-sidenav>自动重新缩放（包括其子元素）以完全占据窗口的高度减去 的高度<mat-toolbar>，这样无论添加多少都不需要滚动来查看它包含的元素列表，并且我希望<mat-sidenav-content>自动滚动，因为它的内容总是比不滚动窗口的内容要多。

就我现在所知，尝试获取前者的最佳方法是添加到 CSS 中：

这似乎使<mat-sidenav>窗口比窗口稍长，并且随着元素添加到<mat-nav-list>，此方法失败，因为它开始需要滚动。

有没有更有效的方法来做到这一点？

编辑

<mat-toolbar>我可以通过为标题和<mat-sidenav-container>外壳指定高度相对视口来解决其中的一些问题。剩下的唯一问题是自动调整内容的大小<mat-sidenav>，使其永远不需要滚动。

使用 Angular + Angular 材质 12

如果你想关闭 MatSidenav，那么我发现的几乎每个解决方案都说： (click)="sidenav.close()"在 html 组件中。

但我的注销功能需要那个（点击）(click)="onLogoutSideNav()"

我需要从组件中的方法内部而不是从 html 关闭 MatSidenav。我能找到的唯一解决方案是：

但是这样做会返回未定义的 this.sidenav。

有很多使用@ViewChild 的解决方案，但我没有将导航拆分为标题和侧边栏组件。我保持简单，在 app.component 中这样做。

我在这里想念什么？

我正在尝试在我的项目中使用有角材质 sidenav，但是当我将它添加到项目中时，它会导致整个页面为空白（白色），并且当我检查 DOM 时，mat-sidenav-container 内部没有任何内容被渲染。我确信无论我在做什么或不做什么都非常简单。我已经在我的项目中成功使用了其他角度材料（即工具栏）。

https://stackblitz.com/edit/angular-ivy-bcujpz?file=src%2Fapp%2Fhello.component.ts