Typescript 垫子工具栏不起作用的Angular 布线

我正在try 调用3个不同的标签使用Angular 布线.我使用工具栏垫来显示.我遵循了YouTube https://www.youtube.com/watch?v=ADEZTrIxj1k&ab_channel=TechnophileProgBox教程中的步骤.

在我编程时，导航使用的是一个组件.现在，它不再与任何一家公司合作.

我已经搜索了Stackoverflow的解决方案，但没有找到任何东西，您能帮助我吗？

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 { }

``folder structure`