标签: mat-sidenav

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'push' : 'push'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

我不明白代码中写的是什么,(isHandset$ | async)请解释一下

我无法让 Angular Material 侧导航容器填充屏幕的高度。侧导航以及侧导航内容的高度正好适合其内容。我想让它的高度填满屏幕。

导航组件的 HTML：

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>Title</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      (click)="closeDrawerIfHandset(drawer)">
      <mat-nav-list>
        <a mat-list-item routerLink="/">Home</a>
        <a mat-list-item routerLink="/link1">Link1</a>
      </mat-nav-list>
  </mat-sidenav> 
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

父（根）组件的 HTML：

<main-nav>
    <router-outlet></router-outlet>
</main-nav>

我真的没有应用CSS：

.sidenav {
  width: 200px;
}

它看起来是这样的：

我已经尝试将 mat-sidenav-container 设置为全屏，但这隐藏了 mat-工具栏。当我将容器设置为具有“顶部：”以便再次显示工具栏时，滚动不足以显示整个页面内容。

Stackblitz …

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

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

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

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

现在，对话框始终显示在内容上方。

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

重现案例：

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

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

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

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

打字稿代码：

// Declaration
@ViewChild('drawer', { static: false }) public drawer: MatDrawer;

// Toggle the Side Nav bar
showSideNav(): void {
    this.drawer.toggle();
}

HTML 代码：

<mat-drawer-container>
      <mat-drawer #drawer>
        <div>Side nav bar content</div>
      </mat-drawer>
      <div>Main content</div>
</mat-drawer-container>

控制台错误：

ERROR TypeError: "this.drawer is undefined"

请帮助我如何使用访问该MatDrawer元素@ViewChild

我创建了一个stackblitz 示例

如果您打开侧面导航，然后看到扩展面板上的芯片，您将看到它的形状是矩形，但它应该看起来是圆形的。我该如何解决 ？

编辑： Github上已经存在这个问题

如何在组件中调用角度材质侧导航操作？我有一个用例，sidenav 仅在方法触发时才能打开/关闭callMethods()。我也不能简单地传递open(e)（callMethods()需要 1 个参数）。有办法实现这个目标吗？

应用程序.html

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="mode.value">
    <p>
      some nav here
    </p>
  </mat-sidenav>

  <mat-sidenav-content>
    <p><button mat-button (click)="open(sidenav)">Toggle</button></p>
    <p>
      some text here
    </p>
  </mat-sidenav-content>
</mat-sidenav-container>

应用程序.ts

open(e: any) {
    e.toggle();
  }

  callMethods() {
    this.open(); // required 1 arguments
    this.otherMethod();
  }
anotherMethod() {
    this.open(); // required 1 arguments
    this.otherMethod();
  }

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