Angular 4.x 路由快速入门学习

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。

接下来我们将按照以下目录的内容，介绍 Angular 的路由。具体目录如下：

目录

1. Installing the router
   1. Base href
2. Using the router
   1. RouterModule.forRoot
   2. RouterModule.forChild
3. Configuring a route
4. displaying routes
5. Futher configuration
   1. Dynamic routes
   2. Child routes
   3. Component-less routes
   4. loadChildren
6. Router directives
   1. routerLink
   2. routerLinkActive
7. Router API

Installing the router

首先第一件事，我们需要安装 Angular Router。你可以通过运行以下任一操作来执行此操作：

rush:bash;"> yarn add @angular/router # OR npm i --save @angular/router

以上命令执行后，将会自动下载 @angular/router 模块到 node_modules 文件夹中。

Base href

我们需要做的最后一件事，是将 标签添加到我们的 index.html 文件中。路由需要根据这个来确定应用程序的根目录。例如，当我们转到 http://example.com/page1 时，如果我们没有定义应用程序的基础路径，路由将无法知道我们的应用的托管地址是 http://example.com 还是 http://example.com/page1 。

这件事操作起来很简单，只需打开项目中的 index.html 文件，添加相应的 标签，具体如下：

rush:xhtml;">

以上配置信息告诉 Angular 路由，应用程序的根目录是 / 。

Using the router

要使用路由，我们需要在 AppModule 模块中，导入 RouterModule 。具体如下：

import { AppComponent } from './app.component';

@NgModule({
imports: [
BrowserModule,RouterModule
],bootstrap: [
AppComponent
],declarations: [
AppComponent
]
})
export class AppModule {}

此时我们的路由还不能正常工作，因为我们还未配置应用程序路由的相关信息。RouterModule 对象为我们提供了两个静态的方法：forRoot() 和 forChild() 来配置路由信息。

RouterModule.forRoot()

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用 forRoot() ：

export const ROUTES: Routes = [];

@NgModule({
imports: [
BrowserModule,RouterModule.forRoot(ROUTES)
],// ...
})
export class AppModule {}

我们通过使用 const 定义路由的配置信息，然后把它作为参数调用 RouterModule.forRoot() 方法，而不是直接使用 RouterModule.forRoot([...]) 这种方式，这样做的好处是方便我们在需要的时候导出 ROUTES 到其它模块中。

RouterModule.forChild()

RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。

友情提示：根模块中使用 forRoot()，子模块中使用 forChild()

这个功能非常强大，因为我们不必在一个地方（我们的主模块）定义所有路由信息。反之，我们可以在特性模块中定义模块特有的路由信息，并在必要的时候将它们导入我们主模块。RouterModule.forChild() 的使用方法如下：

export const ROUTES: Routes = [];

@NgModule({
imports: [
CommonModule,RouterModule.forChild(ROUTES)
],// ...
})
export class ChildModule {}

通过以上示例，我们知道在主模块和特性模块中，路由配置对象的类型是一样的，区别只是主模块和特性模块中需调用不同的方法，来配置模块路由。接下来我们来介绍一下如何配置 ROUTES 对象。

Configuring a route

我们定义的所有路由都是作为 ROUTES 数组中的对象。首先，为我们的主页定义一个路由：

import { HomeComponent } from './home/home.component';

export const ROUTES: Routes = [
{ path: '',component: HomeComponent }
];

@NgModule({
imports: [
BrowserModule,// ...
})
export class AppModule {}

示例中我们通过 path 属性定义路由的匹配路径，而 component 属性用于定义路由匹配时需要加载的组件。

友情提示：我们使用 path: '' 来匹配空的路径，例如：https://yourdomain.com

Displaying routes

配置完路由信息后，下一步是使用一个名为 router-outlet 的指令告诉 Angular 在哪里加载组件。当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到 router-outlet 元素中。

在我们 AppComponent 组件中，我们可以在任意位置插入 router-outlet 指令：

@Component({
selector: 'app-root',template: `
<div class="app">

Our app

` }) export class AppComponent {}