问题标签 [mat-sidenav]

mat-sidenav页面加载时打开。我该如何关闭它？

这是我的 HTML：

另外，当我单击页面中的任意位置时，我希望它关闭（打开时）。目前，只有当我单击菜单按钮时它才会关闭。

我正在尝试使用官方打开/关闭示例让 sidenav 工作。

我是 Angular 的新手，所以我不确定一切应该如何工作，但对于其他组件，到目前为止，我一直很好地抓住示例的 HTML 部分并修改 CSS。

经过反复试验，我发现mat-sidenav-content不是 sidenav 的内容，而是页面/站点内容。

为了进行实验并让某些东西起作用，我现在在我的app.component.html中这样做了（一旦我弄清楚了，以后可能会进入指令/组件）：

该示例在mat-sidenav上使用[(opened)]="opened"。这只是让导航对我关闭，只需使用open就可以打开它。无论哪种方式，开关都坏了。切换开关在topnav.html中：

控制台在切换时失败。

我相信这可能与缺少 Material 模块有关，但据我所知，我拥有所有相关的模块。

如果有任何关于要修改哪些文件/部分的帮助非常明确，我将不胜感激，因为这种环境对我来说相对较新。谢谢！

我正在使用 Angular Material sidenav，我的菜单有一个子菜单。当我打开子菜单时，会出现一个滚动条，使 sidenav 稍大一些，它涵盖了一些主要内容。

请参阅此 Stackblitz https://stackblitz.com/edit/angular-raedvz，展开子菜单，您将看到行为。

我运行了一个简单的命令，该命令应该生成可以用作导航栏的预构建文件。它下载正确，但如果我添加<main-nav></main-nav>到我的 app.component.html 页面，它只会输出一个空白页面。我的控制台中没有错误。以下是命令：ng generate @angular/material:material-nav --name=main-nav 我使用的是 Mac、Angular 6 和 Angular Material。以下是我关注的视频：https ://www.youtube.com/watch?v=Q6qhzG7mObU 。我已经独立测试了每个部分，发现该<mat-sidenav></mat-sidenav>功能根本不起作用。

在 Angular 6 中，我使用材质侧导航 & 也使用材质树：

家长：

孩子：

然而，我得到的数据是动态的。它可能嵌套 x 深度。使用材质树，可以超出我设置的宽度（240px）。

Material 的 mat-side-nav 似乎不支持水平滚动。如果文件夹结构通过宽度，sidenav 只是使用分词，不允许水平滚动。

只是试图在 mat-side-nav 内启用水平滚动...

更新：尝试对样式使用“空白：nowrap”。如果添加到顶层（mat-sidenav），只会影响任何东西。然后启用了滚动——但产生了以下结果：

没有多少 css 出现扩展宽度以满足溢出。

我不明白代码中写了什么(isHandset$ | async)请解释

我目前在理解 Angular（Angular - 版本 5）方面处于中级水平。我一直在尝试构建我自己的示例应用程序，并且我还打算将角度材料组件用于 UX。

当我使用 mat-side-nav 时，导航内容不会延伸到整个浏览器/窗口的高度。相反，它只是延伸到一个非常小的高度。

以下是我目前在我的项目中拥有的一段代码。

Header.component.html

Header.component.css

header.component.ts 中还没有代码

app.component.html 中的代码

侧边导航栏截图

任何人都可以帮助我在这里出错吗？

感谢一个和所有！

我正在使用带有材料设计的角度版本 6 。我创建了一个在材料设计中使用 sidenav 组件的页面，它的 stackblitz 链接是https://angular-pxw1qr.stackblitz.io/sidenav。当我在任何 Iphone 中打开 sidenav 页面并下拉或拉起屏幕时，sidenav 内容位于页面内容的后面，并且白色背景出现在页面的顶部或底部。

我能做些什么来消除这种行为？

当导航栏被点击打开时，导航栏的宽度会随着内容自动调整。

当我将 SCSS 中侧导航的宽度设置为

导航栏默认打开，无需点击打开。它也不会通过点击关闭

当您使用 Android 设备打开网站时，是否可以通过使用 Android 的“后退”按钮来隐藏 Angular Material Sidenav 组件？