Angular 4新组件中Sidenav和Toolbar不显示问题求助

看起来你正在搭建Angular应用的基础布局，我帮你把这段代码整理成规范的格式，同时补充完整的sidenav实现细节和实用建议，让你的布局更健壮：

完整的app-layout组件模板 #

<div class="yaanapage">
  <mat-toolbar color="primary" class="toolbar">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>YAANA-</span>
  </mat-toolbar>

  <mat-sidenav-container fullscreen autosize>
    <mat-sidenav #sidenav mode="side" [opened]="false" class="sidenav">
      <!-- 侧边栏导航内容 -->
      <mat-nav-list>
        <a mat-list-item routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
        <a mat-list-item routerLink="/profile" routerLinkActive="active">Profile</a>
        <a mat-list-item routerLink="/settings" routerLinkActive="active">Settings</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <!-- 主内容区域，用于渲染路由组件 -->
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

关键注意事项与优化建议 #

• 必备模块导入：确保你的布局模块（或AppModule）中导入了所有需要的Angular Material模块，否则组件会无法正常渲染：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  
  // Material模块
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { MatSidenavModule } from '@angular/material/sidenav';
  import { MatIconModule } from '@angular/material/icon';
  import { MatButtonModule } from '@angular/material/button';
  import { MatListModule } from '@angular/material/list';
  
  import { AppLayoutComponent } from './app-layout.component';
  
  @NgModule({
    declarations: [AppLayoutComponent],
    imports: [
      CommonModule,
      RouterModule,
      MatToolbarModule,
      MatSidenavModule,
      MatIconModule,
      MatButtonModule,
      MatListModule
    ],
    exports: [AppLayoutComponent]
  })
  export class AppLayoutModule { }
  

• 样式优化：把内联的top: 80px !important替换为CSS类，让样式更易维护，同时确保布局占满整个视口：

  .yaanapage {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  
  .toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 100; /* 确保工具栏在侧边栏上方 */
  }
  
  mat-sidenav-container {
    flex: 1;
    margin-top: 80px; /* 避开固定定位的工具栏 */
  }
  
  .sidenav {
    width: 250px; /* 固定侧边栏宽度 */
  }
  
  .mat-list-item.active {
    background-color: rgba(0,0,0,0.1); /* 路由激活状态样式 */
  }
  

• 响应式增强：针对移动端优化侧边栏模式，提升用户体验：
  在组件类中添加移动端检测逻辑：

  import { Component, OnInit } from '@angular/core';
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  
  @Component({
    selector: 'app-layout',
    templateUrl: './app-layout.component.html',
    styleUrls: ['./app-layout.component.css']
  })
  export class AppLayoutComponent implements OnInit {
    isMobile = false;
  
    constructor(private breakpointObserver: BreakpointObserver) {}
  
    ngOnInit(): void {
      this.breakpointObserver.observe(Breakpoints.Handset)
        .subscribe(result => {
          this.isMobile = result.matches;
        });
    }
  }
  

  然后修改模板中的sidenav配置：

  <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile">
    <!-- 移动端添加关闭按钮 -->
    <button *ngIf="isMobile" mat-icon-button (click)="sidenav.close()" style="margin-left: auto;">
      <mat-icon>close</mat-icon>
    </button>
    <!-- 导航列表 -->
  </mat-sidenav>
  

内容的提问来源于stack exchange，提问作者Anil