Angular4学习笔记（三）- 路由

时间  2019-11-06
标签 angular4 angular 学习 笔记 路由 栏目 AngularJS 繁體版
原文   原文链接

路由简介

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

相关的类

Routes

Routes实际上是一个Route类的数组。html

而Route的参数以下图所示，通常状况下，path和component是必选的两个参数。
好比：path:/a,component:A则说明，当地址为/a时，应该展现组件A的内容。node

其他类的简介见下图：jquery

应用

新建项目

输入命令ng new router --routing新建一个名叫router的项目，其中--routing命令参数表明在项目基础上添加一个路由配置文件app-routingcodule.ts。typescript

能够看到路由配置文件已经生成，其初始内容是：npm

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

const routes: Routes = [];

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

新增组件

在项目根路径下运行命令ng g component home和ng g component books来新增home和books两个组件，此时可能会出现too many symbolic links encountered的错误:数组

解决办法：app

  1. 删除根目录下的node_modules目录
  2. 更新cli命令行工具npm install -g @angular/cli
  3. 从新安装：npm install

配置路由

在路由配置文件中为routes赋值：dom

const routes: Routes = [{path: '', component: HomeComponent}, {path: 'books', component: BooksComponent}];

其中HomeComponent和BooksComponent分别对应咱们新增的两个组件。
另外须要注意path参数中不须要输入/！iphone

定义模板

打开app.component.html,输入一下代码：

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/books']">书籍</a>

<router-outlet></router-outlet>

启动项目就能够看到效果了：

使用Router

要使用Router对象，首先须要在控制器文件中定义它，通常是在构造函数constructor中传递相关参数：

constructor(private router: Router) {
  }

这样就能够在控制器中使用router来跳转路由了,好比写个方法toBookDetails：

toBookDetails() {
    router.navigate(['/books']);
}

如何调用呢，在模板文件中经过定义一个按钮并用(click)来绑定便可：

<input type="button" value="书籍" (click)="toBookDetails()">

效果以下：

通配符

以上咱们都假设输入的路径都是存在的，可是假如用户不当心输入了一个不存在的路径，咱们有义务给予一些善意的提醒，如何实现呢？这就要使用通配符了，其用法以下：
首先建立一个新增模块err404模块，用于输入不存在的路径时展现，命令以下：
ng g component err404;
而后在路由配置文件中添加一条路由信息：

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'books', component: BooksComponent},
  {path: '**', component: Err404Component}
];

程序会根据用户定义的路由顺序依次匹配，当全部明确指定的路由均不知足匹配条件时，才会进入Err404Component组件，因为是依次匹配，因此将其放入最后。
最后，输入http://localhost:4200/test,结果以下：

参数传递

参数传递的几种方式：

  1. 普通方式传递数据：/product?id=1&name=iphone => ActivatedRoute.queryParams[id];
  2. rest方式传递数据：{path:/product/:id} => /product/1 => ActivatedRoute.params[id];
  3. 路由配置传递数据：{path:/product,component:ProductComponent,data:[{madeInChina:true}]} => ActivatedRoute.data[0][madeInChina];

注入ActivatedRoute

与注入Router对象同样，将其置于组件控制器的构造函数中，此处以BooksComponent为例并为其增长一个bookname的属性，让其在初始化时直接显示属性bookname的值：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
  private bookname: string;

  constructor(private activatedRout: ActivatedRoute) {
  }

  ngOnInit() {
    // 普通方式传参的快照获取方式
    this.bookname = this.activatedRout.snapshot.queryParams['bookname'];
  }

}

其中snapshot表示快照方式，还可使用订阅subscribe方式，下面再说。

普通方式传参

在模板文件app.component.html中为/books所在的<a>标签中添加属性[queryParams]:

<a [routerLink]="['/books']" [queryParams]="{bookname:'《活着》'}">书籍</a>

此时点击显示的路由信息则为：

为了更明确起见，在books组件的模板文件中添加绑定信息：

最终呈现效果：

rest方式传参

首先须要在路由配置文件中预约义参数的名称：

而后在<a>中直接传递值：

<a [routerLink]="['/books','《活着》']">书籍</a>

此时点击连接时所呈现的路径变为：

最后，经过params方法来获取参数的值：

// rest方式传参的快照获取方式
    this.bookname = this.activatedRout.snapshot.params['bookname'];

这样就能够呈现同上面同样的效果的内容了。那么，如何经过方法来传递rest形式的参数呢？其实同<a>的格式同样：

toBookDetails() {
    this.router.navigate(['/books', '《简爱》']);
  }

此时我传入的参数是《简爱》，在连接主页和连接书籍或者在连接主页和按钮书籍之间切换点击时，内容的显示是没有问题的，可是在连接书籍和按钮书籍之间切换点击时，底下展现的内容不发生变化，这时就要用到参数订阅的方式来实时呈现了：

// rest方式传参的订阅获取方式
this.activatedRout.params.subscribe((params: Params) => this.bookname = params['bookname']);

路由配置传参

这种传参是静态的，假设此时须要添加一个参数isChineseVersion来表示是不是中文版，其配置形式以下：

此时在book组件控制器中新增一个boolean类型参数isChineseVersion，并在初始化方法ngOnInit中为其赋值：
this.isChineseVersion = this.activatedRout.snapshot.data[0]['isChineseVersion'];，最后在模板文件中绑定便可：

<p>
  is Chinese Version: {{isChineseVersion}}
</p>

重定向路由

在用户访问一个特定地址时，将其重定向到另外一个指定的地址。
此处先将全部指向HomeComponent的根路径所有改成/home,包括路由配置文件和<a>。
此时虽然指定了当路径为/home时才指向HomeComponent组件，但若是我但愿访问根路径时直接展现HomeComponent的内容是怎么办，重定向路由能够帮助咱们实现，语法以下：

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'books/:bookname', component: BooksComponent, data: [{isChineseVersion: true}]},
  {path: '**', component: Err404Component}
];

须要注意的是，pathMatch属性的值，当为full时，表示只有当路径为根路径时才指向HomeComponent组件，它还有另外一个值：prefix，意思是匹配前缀，试了以后发现没有用，好比
{path: 'hh', redirectTo: '/home', pathMatch: 'prefix'},当访问的路径为http://localhost:4200/h或者http://localhost:4200/hhh时都不会呈现主页内容而是直接跳到Err404的内容，此处存疑。

子路由

子路由定义的格式以下：

上图中子路由的意思是，当访问/home/时，展现HomeComponent和XxxComponent的内容，当访问/home/yyy时，展现HomeComponent和YyyComponent的内容。

明确需求

在书籍模块的模板下方，增长两个连接，《简爱》的中文简介和英文简介，点击时分别显示对应语言的简介，默认显示中文简介。

实现

  1. 生成组件introduction_cn=>ng g component introduction_cn和
    introduction_en=>ng g component introduction_en
  2. 分别在对应中英文模板中添加显示的内容，代码略；
  3. 在路由配置文件中定义子路由：
{
    path: 'books/:bookname', component: BooksComponent, children: [
    {path: '', component: IntroductionCnComponent},
    {path: 'en', component: IntroductionEnComponent}
  ]
  }
  1. 在书籍模板中定义连接和定位显示位置：
<p>
  books works!
</p>
<p>
  query book is name of {{bookname}}
</p>
<a [routerLink]="['./']">中文简介</a>
<a [routerLink]="['./en']">英文简介</a>

<router-outlet></router-outlet>

效果

多个路由

以上的例子中都是一个路由来操控页面的显示内容，可是实际上页面老是有多个模块，如何来分配各自区域的显示控制呢？这时就要用到多路由了，好比在上面的例子中，在主界面上只定义了一个<router-outlet></router-outlet>，当咱们定义多个路由时就须要加以区分，实现方式很简单，在<router-outlet>上加一个name属性并赋值便可，好比：<router-outlet name = "a"></router-outlet>,此时a就是此路由定位器的标识，当不定义name属性时，其名称默认为primary。

下面经过实际例子作个简单演示：

  • 需求
    在原有基础上添加两个连接开始咨询和结束咨询，当点击开始咨询时页面右侧显示文本域,同时左侧显示HomeComponent组件内容，当点击结束咨询时文本域消失，页面左侧仍然显示原有内容。
  • 为原有组件添加样式，使其宽度变为70%，而且靠页面左边，此例中涉及的组件有HomeComponent/BooksComponent，以主页组件为例演示：

使用div元素将原有内容包裹，并定义class值为home

<div class="home">
  <p>
    home works!
  </p>
</div>

定义样式：

.home {
  background-color: yellowgreen;
  height: 750px;
  width: 70%;
  float: left;
  box-sizing: border-box;
}

同理定义BooksComponent模板及样式文件。

  • 新增咨询组件
    ng g component advise
  • 定义模板
<textarea placeholder="请输入内容" class="advise"></textarea>
  • 定义样式
.advise {
  background-color: green;
  height: 750px;
  width: 30%;
  float: left;
  box-sizing: border-box;
}
  • 新增路由advise

在路由配置文件中新增路由并制定定位器：

  • 新增开始咨询连接并指定定位器
    指定定位器仍然经过routerLink，格式：<a [routerLink]="[{outlets:{primary:'home', advise:'advise'}}]">开始咨询</a>
    表示点击连接时，没有名字(前面说了，它的默认名字叫primary)的定位器处显示路径为/home即组件是HomeComponent的内容，而名叫advise定位器处显示路径为/advise即组件是AdviseComponent的内容。
    同理，定义结束咨询的：<a [routerLink]="[{outlets:{advise:null}}]">书籍</a>

  • 添加名叫advise的定位器

  • 效果

路由守卫

路由守卫通常涉及三个类：CanActivate,CanDeactivate,Resolve.
CanActivate：决定是否有权限进入某路由；
CanDeactivate：决定是否能够离开某路由；
Resolve：初始化某个组件中的被Resolve绑定的类型参数；

CanActivate用法

新建ts文件：PermissionGuard.ts

import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import * as _ from 'lodash';
export class PermissionGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    const rand = _.random(0, 5);
    console.log(rand);
    return rand % 2 === 0;
  }
}

在路由配置文件中增长canActivate参数：

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'advise', component: AdviseComponent, outlet: 'advise'},
  /*{path: 'books/:bookname', component: BooksComponent, data: [{isChineseVersion: true}]},*/
  {
    path: 'books/:bookname',
    component: BooksComponent,
    children: [
      {path: '', component: IntroductionCnComponent},
      {path: 'en', component: IntroductionEnComponent}
    ],
    canActivate: [PermissionGuard]
  },
  {path: '**', component: Err404Component}
];

在模块配置文件app.moudle.ts中的providers参数中增长实现了CanActivate接口的值：

providers: [PermissionGuard]

目的是实例化PermissionGuard。

此时，再次点击连接书籍时会先判断生成的随机数除2时的余数，余0则可进入，不然被阻止。

CanDeactivate用法

需求：
当咨询窗口已被打开，而且已经输入了内容，此时忽然点击结束，会被阻止，相似博客编辑到一半忽然访问其余网站时会给出提示同样。

新建ts文件LeaveGuard.ts：

import {CanDeactivate} from '@angular/router';
import {AdviseComponent} from '../advise/advise.component';
import {Observable} from 'rxjs/Observable';
export class LeaveGuard implements CanDeactivate<AdviseComponent> {
  /**
   * 下面这段代码是自带实现，暂时注掉不用它。
   * canDeactivate(component: AdviseComponent,
   * currentRoute: ActivatedRouteSnapshot,
   * currentState: RouterStateSnapshot,
   * nextState?: RouterStateSnapshot)
   * : boolean | Observable<boolean> | Promise<boolean> {
   *    throw new Error("Method not implemented.");
   * }
   * @param advise
   * @returns {boolean}
   */
  canDeactivate(advise: AdviseComponent): boolean | Observable<boolean> | Promise<boolean> {
    return advise.isEmpty();
  }
}

能够看到CanDeactivate不一样于CanActivate,使用时须要输入泛型类，用以绑定数据。代码中使用了isEmpty(),它是咨询组件AdviseComponent中的一个方法，表示当输入的咨询内容为空时返回真，代码以下：

import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-advise',
  templateUrl: './advise.component.html',
  styleUrls: ['./advise.component.css']
})
export class AdviseComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }

  isEmpty(): boolean {
    const adviseVal = $('textarea').val();
    console.log(adviseVal);
    return adviseVal === '';
  }

}

在路由配置文件中为组件AdviseComponent添加canDeactivate属性并赋值：

{
    path: 'advise',
    component: AdviseComponent,
    outlet: 'advise',
    canDeactivate: [LeaveGuard]
  }

在模块文件app.module.ts参数providers新增LeaveGuard用以实例化:

providers: [PermissionGuard, LeaveGuard]

Resolve

为方便演示，先将路由配置文件中关于BookComponent的canActivate参数注掉，防止干扰。

在books.componnet.ts中新建类Book,将属性bookname替换名为book类型为Book的成员变量，添加对对此成员变量的订阅方法：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
  public book: Book;
  private isChineseVersion: boolean;

  constructor(private activatedRout: ActivatedRoute) {
  }

  ngOnInit() {
    // 普通方式传参的快照获取方式
    // this.bookname = this.activatedRout.snapshot.queryParams['bookname'];

    // rest方式传参的快照获取方式
    // this.bookname = this.activatedRout.snapshot.params['bookname'];
    // rest方式传参的订阅获取方式
    // this.activatedRout.params.subscribe((params: Params) => this.book.bookname = params['bookname']);
    this.activatedRout.data.subscribe((data: { book: Book }) => this.book = data.book);
    // 路由配置方式传参的获取方式
    // this.isChineseVersion = this.activatedRout.snapshot.data[0]['isChineseVersion'];
  }

}

export class Book {
  public bookname: string;
  public author?: string;
  public private?: number;

  constructor(bookname: string) {
    this.bookname = bookname;
  }
}

修改books.component.html中query book is name of {{bookname}} => query book is name of {{book?.bookname}}

新建BookResolve.ts:

import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Book} from '../books/books.component';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';

@Injectable()
export class BookResolve implements Resolve<Book> {
  constructor(private router: Router) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Book | Observable<Book> | Promise<Book> {
    const bookname = route.params['bookname'];
    if (bookname === '《活着》' || bookname === '《简爱》') {
      console.log('当前输入书名为：' + bookname);
      return new Book('《简爱》');
    } else {
      this.router.navigate(['/home']);
      return null;
    }
  }
}

在路由控制文件中为组件BooksComponent添加resolve参数并赋值：resolve: {book: BookResolve}

在模块文件app.module.ts参数providers新增BookResolve用以实例化:

providers: [PermissionGuard, LeaveGuard, BookResolve]

总结

源码

http://pan.baidu.com/s/1bpNdgFt

使用前先运行ci.bat~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程