内含路由器链接的NgFor按钮

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  buttons = [
    { label: 'Home', link: '/home' },
    { label: 'About', link: '/about' },
    { label: 'Contact', link: '/contact' }
  ];
}

<!-- app.component.html -->
<ul>
  <li *ngFor="let button of buttons">
    <a routerLink="{{ button.link }}">{{ button.label }}</a>
  </li>
</ul>

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

<a routerLink="{{ button.link }}">{{ button.label }}</a>

buttons = [
  { label: 'Home', link: '/home' },
  { label: 'About', link: '/about' },
  { label: 'Contact', link: '/contact' }
];

// app.component.ts
trackByFn(index: number, item: any): number {
  return index;
}

<ul>
  <li *ngFor="let button of buttons; trackBy: trackByFn">
    <a routerLink="{{ button.link }}">{{ button.label }}</a>
  </li>
</ul>