Angular 2 路由器示例 + @Routes 键入支持

路由器

使用Angular 2的路由器示例和@Routes键入支持，我们可以轻松地为我们的应用程序创建强大的导航功能。Angular 2的路由器是一个强大的工具，它允许我们在我们的应用程序中创建多个视图，并根据用户的导航选择加载不同的组件。让我们来看一个简单的例子，以便更好地理解如何使用路由器。

设置路由器

首先，我们需要在我们的应用程序中设置路由器。我们可以通过创建一个名为app.routing.ts的新文件来实现这一点。在这个文件中，我们将导入RouterModule和Routes类，然后定义我们的路由配置。让我们看一下下面的代码示例：

typescript
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];
export const routing = RouterModule.forRoot(appRoutes);

在上面的代码中，我们定义了三个路由：一个用于主页，一个用于关于页面，另一个用于联系页面。我们将这些路由配置添加到appRoutes数组中，并通过调用RouterModule.forRoot(appRoutes)导出路由器配置。

在应用程序中使用路由器

一旦我们设置了路由器，我们就可以在我们的应用程序中使用它。让我们看一个简单的例子，以便更好地理解如何使用路由器。

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <nav>
      Home
      About
      Contact
    </nav>
    <router-outlet></router-outlet>
  </code>
})
export class AppComponent { }

在上面的代码中，我们定义了一个名为AppComponent的组件，并在其模板中使用了routerLink指令来创建导航链接。当用户点击这些链接时，路由器将根据配置加载相应的组件，并将其渲染在router-outlet指令中。

添加导航到组件

现在我们已经设置了路由器并在应用程序中使用了它，让我们看一下如何在组件中添加导航功能。

typescript
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-home',
  template: <code>
    <h1>Welcome to the Home Page!</h1>
    <button (click)="goToAbout()">Go to About Page</button>
  </code>
})
export class HomeComponent {
  constructor(private router: Router) { }
  goToAbout() {
    this.router.navigate(['/about']);
  }
}

在上面的代码中，我们定义了一个名为HomeComponent的组件，并在其模板中添加了一个按钮。当用户点击按钮时，goToAbout方法将被调用，该方法通过调用this.router.navigate(['/about'])将用户导航到关于页面。

使用Angular 2的路由器示例和@Routes键入支持，我们可以轻松地为我们的应用程序创建强大的导航功能。我们可以设置路由器，定义路由配置，并在应用程序中使用它。我们还可以在组件中添加导航功能，并通过路由器导航到不同的视图。希望这个例子能帮助你更好地理解如何使用Angular 2的路由器。