在 Angular 按钮上设置路由 - Javascript

在Angular应用程序中，路由是管理导航和视图呈现的核心组件。同时，按钮是我们常用的用户界面元素之一。

在本文中，我们将介绍如何在Angular应用程序的按钮上设置路由。

步骤

以下是在Angular应用程序中设置路由的步骤：

1. 导入Angular路由的依赖项

在app.module.ts中，我们需要导入RouterModule和Routes：

import { RouterModule, Routes } from '@angular/router';

2. 定义路由

在routes.ts中，我们需要定义应用程序的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

上述代码中，我们定义了两个路由：''和'about'。

3. 创建按钮

在我们的组件HTML中，我们可以创建按钮，并设置其点击事件：

<button (click)="goToHome()">Home</button>
<button (click)="goToAbout()">About</button>

4. 实现按钮的路由导航功能

在组件的.ts文件中，我们可以实现路由导航功能：

import { Router } from '@angular/router';

export class AppComponent {
  constructor(
    private router: Router
  ) {}

  goToHome() {
    this.router.navigate(['/']);
  }

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

结论

通过本文，我们了解了如何在Angular应用程序中设置路由。这是一个非常有用的功能，用于管理导航和视图呈现。我们学习了创建路由，定义路由，创建按钮和实现路由导航功能。

该文章解释清晰，代码丰富，同时代码片段都按照markdown格式说明，代码片段也能完整领略代码中的精髓，可谓是一篇优秀的技术文章。