Angular路由结合Mat-Toolbar导航失效问题求助

问题描述 #

我尝试使用Angular路由切换3个不同页面，通过Mat-Toolbar展示导航按钮。按教程操作过程中曾有一个组件可正常导航，但现在所有组件均无法跳转，恳请帮助。

相关代码 #

app.component.html #

<app-navbar></app-navbar>
<router-outlet></router-outlet>

navbar.component.html #

<mat-toolbar color="primary" class="mat-elevation-z8">
    <span><mat-icon>euro_symbol</mat-icon> Rechnungen</span>
    <div class="spacer"></div>
    
    <a mat-button router-link="/customers">Kunden</a>
    <a mat-button router-link="/articles">Artikel</a>
    <a mat-button router-link="/invoices">Rechungen</a>

</mat-toolbar>

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomersComponent } from './customers/customers.component';
import { InvoicesComponent } from './invoices/invoices.component';
import { ArticlesComponent } from './articles/articles.component';

const routes: Routes = [
  {path: 'invoices', component:InvoicesComponent},
  {path: 'articles', component:ArticlesComponent},
  {path: 'customers', component:CustomersComponent}
];

@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 {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavbarComponent } from './navbar/navbar.component';
import { ArticlesComponent } from './articles/articles.component';
import { InvoicesComponent } from './invoices/invoices.component';
import { CustomersComponent } from './customers/customers.component';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    ArticlesComponent,
    InvoicesComponent,
    CustomersComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule, //import mattoolbar 
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

文件夹结构 #

排查与修复步骤 #

• 修正RouterLink绑定方式：将导航链接改为Angular推荐的属性绑定语法，替代当前字符串写法：

  <a mat-button [routerLink]="['/customers']">Kunden</a>
  <a mat-button [routerLink]="['/articles']">Artikel</a>
  <a mat-button [routerLink]="['/invoices']">Rechungen</a>
  

  数组形式的绑定更稳定，能避免解析异常。

• 添加默认路由：当前路由无路径跳转规则，添加默认路由可直接测试路由是否正常：

  const routes: Routes = [
    {path: '', redirectTo: '/customers', pathMatch: 'full'},
    {path: 'invoices', component:InvoicesComponent},
    {path: 'articles', component:ArticlesComponent},
    {path: 'customers', component:CustomersComponent}
  ];
  

  启动应用后会自动跳转到Kunden页面，验证路由是否生效。

• 检查控制台错误：打开浏览器开发者工具（F12）查看控制台输出，若存在组件加载失败、路由配置错误等信息，根据提示修复对应问题（比如组件文件路径写错、类未正确导出）。

• 清理缓存重启服务：停止Angular开发服务，删除项目根目录下的node_modules/.cache文件夹，重新执行ng serve启动服务，避免缓存导致的异常。

• 确认组件声明与导入：检查每个页面组件的.ts文件是否正确导出组件类（如export class CustomersComponent {}），同时确保AppModule中已正确声明所有组件（当前代码已满足，但可再次核对）。

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