如何防止我的 angular sidenav 隐藏工具栏？

Question

我想设计一个 angular 组件，由工具栏组成，位于侧边栏下方。这是我的组件对应的 HTML 代码：

<mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    Toolbar Title
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav class="mat-elevation-z8" mode="side" opened="true" [fixedInViewport]="true">
        <mat-nav-list>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="server"></mat-icon>
                    <span> Servers</span>
                </button>        
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="site"></mat-icon>
                    <span> Sites</span>
                </button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="account"></mat-icon>
                    <span> Accounts</span>
                </button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="admin"></mat-icon>
                    <span> Admin</span>
                </button>
            </mat-list-item>
        </mat-nav-list>  
    </mat-sidenav>
    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

这是打字稿代码：

import { Component, OnInit, ViewChild } from '@angular/core';

import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  @ViewChild(MatSidenav) sidenav: MatSidenav;

  constructor() {}

  ngOnInit(): void {}
}

当编译该组件时，我得到的结果是一个被 sidenav 隐藏的工具栏，如下图所示。你知道我的组件有什么问题吗？

Answer 1

只需从侧边栏组件中删除以下属性即可解决问题。

[fixedInViewport]="true"

Stackblitz 示例：- https://stackblitz.com/edit/angular-x5n2bb?file=src%2Fapp%2Fsidenav-overview-example.html

如何防止我的 angular sidenav 隐藏工具栏？

How to prevent my angular sidenav from hiding the toolbar?

angular-material

angular