如何在Angular 8中启用组件页面之间的路由和导航？

在Angular 8中，您可以使用Angular Router来管理应用程序中的路由和导航。 Angular Router是一个单独的Angular库，它允许您为应用程序的不同部分配置URL导航。

以下是在Angular 8中启用组件页面之间的路由和导航的步骤：

步骤1. 安装Angular Router库

在启用路由之前，您需要先安装Angular Router库。您可以使用以下命令在Angular 8项目中安装Angular Router：

npm install --save @angular/router

步骤2. 在应用程序中配置路由

在Angular 8中配置路由的方式有两种：静态路由和动态路由。

• 静态路由： 这种路由方式适用于您已经知道将要导航到的所有URL路径。在Angular 8中定义静态路由的方法是创建一个路由模块。您可以使用以下命令创建路由模块：

ng generate module app-routing --flat --module=app

这将在您的Angular 8项目中创建一个名为“app-routing”的路由模块。在路由模块中，您可以定义应用程序的所有路由路径和相应的组件。

以下是一个简单的路由模块示例：

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 appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

在上面的代码中，我们定义了三个路由路径：/home、/about和/contact，分别对应三个组件：HomeComponent、AboutComponent和ContactComponent。

• 动态路由： 这种路由方式适用于您不知道将要导航到的所有URL路径。在Angular 8中定义动态路由的方法是在路由链接中使用路由参数。通过使用路由参数，您可以将路由链接中的值传递给相应的组件。

以下是一个动态路由示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const appRoutes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent }
];

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

在上面的代码中，我们定义了一个路由路径：/product/:id，其中:id是路由参数。在ProductDetailComponent组件中，您可以使用ActivatedRoute服务获取路由参数的值。

步骤3. 在应用程序中定义路由链接

在Angular 8中，您可以使用RouterLink指令创建应用程序中的路由链接。RouterLink指令允许您定义将要导航到的路由路径和相应的参数（用于动态路由）。

以下是一个使用RouterLink指令创建路由链接的示例：

<ul>
  <li><a routerLink="/home">Home</a></li>
  <li><a routerLink="/about">About</a></li>
  <li><a routerLink="/contact">Contact</a></li>
  <li><a [routerLink]="['/product', productId]">Product {{productId}}</a></li>
</ul>

在上面的代码中，我们定义了四个路由链接：/home、/about、/contact和/product/:id。第四个链接使用了属性绑定，以便根据组件中的值动态更改路由参数。

步骤4. 在应用程序中定义路由导航器

在Angular 8中，您需要使用RouterModule服务来定义应用程序中的路由导航器。路由导航器是一个Angular库，它提供了许多管理路由和导航的方法。

以下是一个定义路由导航器的示例：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>App Component</h1>
    <nav>
      <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/about">About</a></li>
        <li><a routerLink="/contact">Contact</a></li>
      </ul>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  constructor(private router: Router) {}

  navigateToProductPage(productId: number) {
    this.router.navigate(['/product', productId]);
  }
}

在上面的代码中，我们在AppComponent组件中使用了RouterModule服务，并在构造函数中注入了Router服务。我们还在组件的模板中定义了路由导航器的链接和Outlet。

注意：当调用Router服务的navigate方法时，您需要使用数组形式的参数。

步骤5. 运行Angular 8应用程序并测试路由和导航

在完成以上步骤后，您可以使用以下命令启动Angular 8应用程序：

ng serve

此命令将在本地主机上启动Angular 8应用程序，默认端口号为4200。

现在，您可以在浏览器中访问http://localhost:4200，并测试应用程序中的路由和导航链接。

以上就是在Angular 8中启用组件页面之间的路由和导航的步骤。希望这篇文章对您有所帮助！