Angular Flex-Layout侧边栏切换异常：显示后瞬间消失求助

当屏幕最小宽度为960px时，点击打开侧边栏（sidenav），侧边栏会显示后立刻消失。控制台报错信息如下：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
Error: Cannot match any routes. URL Segment: ''

相关组件代码如下：

header.component.html #

<div style="height: 100vh;">
    <mat-toolbar color="primary">
      <span>Test App2</span>
  
      <span class="example-spacer"></span>
  
      <div fxShow="true" fxHide.lt-md="true">
        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
        <a href="#" mat-button>Menu Item 1</a>
        <a href="#" mat-button>Menu Item 2</a>
        <a href="#" mat-button>Menu Item 3</a>
        <a href="#" mat-button>Menu Item 4</a>
        <a href="#" mat-button>Menu Item 5</a>
        <a href="#" mat-button>Menu Item 6</a>
      </div>
  
      <div fxShow="true" fxHide.gt-sm="true" class="hamburger">
        <a href="/" (click)="sidenav.toggle()">
          <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
        </a>
      </div>
      \87cx23gh3 v   
    </mat-toolbar>
  
    <mat-sidenav-container fxFlexFill class="example-container">
      <mat-sidenav #sidenav fxLayout="column">
        <div fxLayout="column">
          <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
          <a href="#" mat-button>Menu Item 1</a>
          <a href="#" mat-button>Menu Item 2</a>
          <a href="#" mat-button>Menu Item 3</a>
          <a href="#" mat-button>Menu Item 4</a>
          <a href="#" mat-button>Menu Item 5</a>
          <a href="#" mat-button>Menu Item 6</a>
        </div>
      </mat-sidenav>
      <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
    </mat-sidenav-container>
  </div>

header.component.css #

.hamburger {
    right: 0;
    display: block;
    margin-top: 10px;
    padding: 1em;
    position: absolute;
}

.example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }

header.component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { HomeComponent } from './pages/home/home.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  { 
    path: 'home', 
    component: HomeComponent 
  },
  { 
    path: 'footer', 
    component: FooterComponent 
  },
  { 
    path: 'header', 
    component: HeaderComponent 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoginComponent } from './pages/login/login.component';
import { HomeComponent } from './pages/home/home.component';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from "@angular/flex-layout";
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { BodyComponent } from './components/body/body.component';
import { MatMenuModule } from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

 

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    HeaderComponent,
    FooterComponent,
    BodyComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    FlexLayoutModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatSidenavModule
  ],
  providers: [],
  bootstrap: [AppComponent, HeaderComponent]
})
export class AppModule { }

核心问题1：锚点跳转触发页面刷新 #

汉堡按钮的<a>标签设置了href="/"，点击后会触发路由跳转至根路径，但你的路由配置中没有根路径的匹配项，控制台报错也验证了这一点。页面刷新会导致侧边栏状态重置，因此出现“显示后立刻消失”的现象。

修复方式：
将汉堡按钮的<a>标签href属性改为href="#"，或者移除href并在点击事件中阻止默认行为：

<!-- 方式1：修改href为# -->
<a href="#" (click)="sidenav.toggle()">
<!-- 方式2：移除href并阻止默认行为 -->
<a (click)="$event.preventDefault(); sidenav.toggle()">

核心问题2：错误的bootstrap配置 #

AppModule的bootstrap数组同时包含AppComponent和HeaderComponent，不符合Angular单根组件的原则，会导致组件初始化异常，间接影响侧边栏行为。

修复方式：
修改app.module.ts，仅保留AppComponent作为bootstrap组件：

bootstrap: [AppComponent]

额外优化：清理无效代码 #

header.component.html中的\87cx23gh3 v是无效字符，建议删除，避免潜在渲染问题。

完成以上修复后，重新启动应用，侧边栏即可正常显示和隐藏，不会再出现自动消失的情况。

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