常见路由任务

本主题讲述当把 Angular 路由器添加到应用中时，如何实现多种常见路由任务。

成都创新互联是专业的富源网站建设公司，富源接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行富源网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

生成一个支持路由的应用

下面的命令会用 Angular CLI 来生成一个带有应用路由模块（​AppRoutingModule​）的基本 Angular 应用，它是一个 NgModule，可用来配置路由。下面的例子中应用的名字是 ​routing-app​。

ng new routing-app --routing --defaults

为路由添加组件

为了使用 Angular 的路由器，应用至少要有两个组件才能从一个导航到另一个。要使用 CLI 创建组件，请在命令行输入以下内容，其中 ​first ​是组件的名称：

ng generate component first

为第二个组件重复这个步骤，但给它一个不同的名字。这里的新名字是 ​second​。

ng generate component second

CLI 会自动添加 ​Component ​后缀，所以如果在编写 ​first-component​，那么其组件名就是 ​FirstComponentComponent​。

本指南适用于 CLI 生成的 Angular 应用。如果你是手动工作的，请确保你的 index.html 文件的 ​
​ 中有 ​
​ 语句。这里假定 ​
app ​文件夹是应用的根目录，并使用 ​
"/"​ 作为基础路径。

导入这些新组件

要使用这些新组件，请把它们导入到该文件顶部的 ​AppRoutingModule ​中，具体如下：

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

定义一个基本路由

创建路由有三个基本的构建块。

把 ​AppRoutingModule ​导入 ​AppModule ​并把它添加到 ​imports ​数组中。

Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 ​--routing​ 标志生成的默认 ​AppModule​。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 把 ​RouterModule ​和 ​Routes ​导入到你的路由模块中。

Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了 ​Routes ​数组，并为 ​@NgModule()​ 配置了 ​imports ​和 ​exports ​数组。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes constant where you define your routes

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

2. 在 ​Routes ​数组中定义你的路由。

这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 ​path ​定义了该路由的 URL 路径。第二个属性 ​component ​定义了要让 Angular 用作相应路径的组件。

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

3. 把这些路由添加到你的应用中。

现在你已经定义了路由，可以把它们添加到应用中了。首先，添加到这两个组件的链接。把要添加路由的链接赋值给 ​routerLink ​属性。将属性的值设置为该组件，以便在用户点击各个链接时显示这个值。接下来，修改组件模板以包含 ​​ 标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。

Angular Router App

路由顺序

路由的顺序很重要，因为 ​Router ​在匹配路由时使用“先到先得”策略，所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由，然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个，因为它匹配每一个 URL，只有当其它路由都没有匹配时，​Router ​才会选择它。

获取路由信息

通常，当用户导航你的应用时，你会希望把信息从一个组件传递到另一个组件。例如，考虑一个显示杂货商品购物清单的应用。列表中的每一项都有一个唯一的 ​id​。要想编辑某个项目，用户需要单击“编辑”按钮，打开一个 ​EditGroceryItem ​组件。你希望该组件得到该商品的 ​id​，以便它能向用户显示正确的信息。

可以用一个路由把这种类型的信息传给你的应用组件。要做到这一点，你可以使用 ​ActivatedRoute ​接口。

要从路由中获取信息：

1. 把 ​ActivatedRoute ​和 ​ParamMap ​导入你的组件。

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

这些 import 语句添加了组件所需的几个重要元素。

2. 通过把 ​ActivatedRoute ​的一个实例添加到你的应用的构造函数中来注入它：

constructor(
  private route: ActivatedRoute,
) {}

3. 更新 ​ngOnInit()​ 方法来访问这个 ​ActivatedRoute ​并跟踪 ​name ​参数：

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.name = params['name'];
  });
}

注意：前面的例子使用了一个变量 ​name​，并根据 ​name ​参数给它赋值。

设置通配符路由

当用户试图导航到那些不存在的应用部件时，在正常的应用中应该能得到很好的处理。要在应用中添加此功能，需要设置通配符路由。当所请求的 URL 与任何路由器路径都不匹配时，Angular 路由器就会选择这个路由。

要设置通配符路由，请在 ​routes ​定义中添加以下代码。

{ path: '**', component:  }

这两个星号 ​**​ 告诉 Angular，这个 ​routes ​定义是通配符路由。对于 component 属性，你可以使用应用中的任何组件。常见的选择包括应用专属的 ​PageNotFoundComponent​，你可以定义它来向用户展示 404 页面，或者跳转到应用的主组件。通配符路由是最后一个路由，因为它匹配所有的 URL。

显示 404 页面

要显示 404 页面，请设置一个通配符路由，并将 ​component ​属性设置为你要用于 404 页面的组件，如下所示：

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

​path ​为 ​**​ 的最后一条路由是通配符路由。如果请求的 URL 与前面列出的路径不匹配，路由器会选择这个路由，并把该用户送到 ​PageNotFoundComponent​。

设置重定向

要设置重定向，请使用重定向源的 ​path​、要重定向目标的 ​component ​和一个 ​pathMatch ​值来配置路由，以告诉路由器该如何匹配 URL。

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

在这个例子中，第三个路由是重定向路由，所以路由器会默认跳到 ​first-component​ 路由。注意，这个重定向路由位于通配符路由之前。这里的 ​path: ''​ 表示使用初始的相对 URL（ ​''​ ）。

嵌套路由

随着你的应用变得越来越复杂，你可能要创建一些根组件之外的相对路由。这些嵌套路由类型称为子路由。这意味着你要为你的应用添加第二 ​​，因为它是 ​AppComponent ​之外的另一个 ​​。

在这个例子中，还有两个子组件，​child-a​ 和 ​child-b​。这里的 ​FirstComponent ​有它自己的 ​