angular4, angular5, angular6 路由配置

一. 简述

如何在angular2+框架中配置页面路由？看似简单却又时长出现各种异常问题，今天就全面的说一下如何配置自己项目的页面路由。

二. 在配置路由之前先要了解什么？

forRoot()和forChild()的区别及使用范围

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

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

三.路由配置步骤

1.安装路由依赖模块  (提示：如果使用ng new xx， 执行过npm install，可忽略此步骤)

npm i --save @angular/router

 

2.使用路由

第一我们需要在 AppModule 模块中，导入 RouterModule。具体如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

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

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

第二我们需要配置应用程序路由的相关信息 (但是需要注意：根模块中使用 forRoot()，子模块中使用 forChild())

我们需要先配置 AppModule 根模块的路由，具体如下：

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

export const ROUTES: Routes = [];

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

第三我们使用在子模块中使用RouterModule.forChild()创建特性模块中定义模块特有的路由信息。RouterModule.forChild() 的使用方法如下：(提示：RouterModule 是必要的,因为我们要在根模块或者其他模块中导入使用！)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
  //导出是必要的,因为我们要在根模块或者其他模块中导入使用
  exports: [RouterModule],
  // ...
})
export class ChildModule {}

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

<!--  -->
<div>
  <div>Header</div>
  <router-outlet></router-outlet>
  <div>Footer</div>
</div>
<!--  -->

在此路由基本就配置完了，如果有任何疑问欢迎大家留言咨询！！！