Angular 5 路由小结

首先要添加路由模块，通常定义为 AppRoutingModule，通过CLI指令生成：

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

--flat   把这个文件放进了   src/app   中，而不是单独的目录中。

--module=app   告诉 CLI 把它注册到   AppModule   的   imports   数组中。

生成后的代码：

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({

  imports: [

    CommonModule

  ],

  declarations: []

})

export class AppRoutingModule { }

由于通常   不会在路由模块中声明组件，所以可以删除   @ NgModule .declarations   并删除对   CommonModule   的引用。

你将会使用   RouterModule   中的   Routes   类来配置路由器，所以还要从   @angular/router   库中导入这两个符号。

添加一个   @ NgModule .exports   数组，其中放上   RouterModule   。 导出   RouterModule   让路由器的相关指令可以在   AppModule   中的组件中使用。

import { NgModule }             from '@angular/core';

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

@NgModule({

  exports: [ RouterModule ]

})

export class AppRoutingModule {}

接下来就是要把项目里的路由添加进来，其中有两个必要属性：

路由定义   会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。

典型的 Angular 路由（ Route ）有两个属性：

1. path：一个用于匹配浏览器地址栏中 URL 的字符串。
2. component：当导航到此路由时，路由器应该创建哪个组件。

RouterModule.forRoot()

你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。

把   RouterModule   添加到   @ NgModule .imports   数组中，并用   routes   来配置它。你只要调用   imports   数组中的 RouterModule .forRoot()   函数就行了。

这个方法之所以叫   forRoot() ，是因为你要在应用的顶级配置这个路由器。   forRoot()   方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。

import { NgModule } from '@angular/core';

// import { CommonModule } from '@angular/common';

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

import { HeroesComponent } from './heroes/heroes.component';

import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [

  // 设置默认跳转路由， full表示与path为空的路由完全匹配

  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

  { path: 'heroes', component: HeroesComponent },

  { path: 'dashboard', component: DashboardComponent }

];

@NgModule({

  imports: [

  //   CommonModule

    RouterModule.forRoot(routes)

  ],

  //declarations: [] //你通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations,并删除对 CommonModule 的引用。

  exports: [ RouterModule ]

})

export class AppRoutingModule { }

添加路由出口 （RouterOutlet）

打开   AppComponent   的根模板，把   其他组件 元素替换为   < router-outlet >   元素。

能在 AppComponent 中使用   RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了   RouterModule。

路由跳转及传参的几种形式：

1.通过路由路径传递

在html标签中用属性 routerLink="/xxx" ,可以设置路由跳转

AppRoutingModule定义的路由数组中：

{ path: 'xxx/:para', component: ComponentName } //多个参数就添加多个/:para

组建中跳转路由的代码：

<a routerLink ="/xxx/para">

此时uri: http://localhost:3100/product/1

2.通过路由参数

AppRoutingModule定义的路由数组中：

{ path: 'xxx', component: ComponentName }

在component.ts里通过Router的navigate方法跳转

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

....

constructor( private router: Router) { }

  toDetail(id,name){

    this.router.navigate(['xxx'], {

        queryParams: {

            id: id,

            name: name

        }

    });

  }

或者，在template上，通过添加参数属性 queryParams：

<a [routerLink]="['/product']" [queryParams]="{id: 1,name: 'name'}">产品</a>

此时uri:  http://localhost:3100/product?id=1&name=name

获得参数的几种形式：

import { ActivatedRoute } from '@angular/router';

...

constructor(

    private route: ActivatedRoute

  ) { }

  ngOnInit() {

//1.路由快照

    const id = this.route.snapshot.paramMap.get('para'); 

// 2.路由订阅

    this.route.params

      .subscribe((params: Params) => {

        this.id = params['para'];

      })

// 3.多个参数的时候

    this.route.queryParams

        .subscribe(queryParams => {

        this.id = queryParams.id;

        this.name = queryParams.name;

    });

  }

路由返回：

import { Location } from '@angular/common';

...

constructor(

    private location: Location

  ) { }

goBack(): void {

    this.location.back();

  }