Angular 路由

路由器中的关键词汇及其含义

路由器部件	含义
Router（路由器）	为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航
RouterModule	一个独立的 NgModule，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
Route（路由）	定义路由器该如何根据 URL 模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。
RouterOutlet（路由出口）	该指令（）用来标记出路由器该在哪里显示视图。
RouterLink（路由链接）	这个指令把可点击的 HTML 元素绑定到某个路由。点击带有 routerLink 指令（绑定到字符串或链接参数数组）的元素时就会触发一次导航。
RouterLinkActive（活动路由链接）	当 HTML 元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个 HTML 元素添加或移除 CSS 类。
ActivatedRoute（激活的路由）	为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。
RouterState（路由器状态）	路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。
链接参数数组	这个数组会被路由器解释成一个路由操作指南。你可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。
路由组件	一个带有RouterOutlet的 Angular 组件，它根据路由器的导航来显示相应的视图。

Routes

Routes(路由配置)，一般在app.routing.module.ts文件里配置，Routes里面是一组路由对象，每个对象有两个属性:path(路由对象的路径)+component(路由对象的组件)，即，当我导航到某一个路径(path)上时，angular会显示哪个组件(component)

<!-- app.module.ts里面的设置-->
import{Routes, RouterModule} from "@angular/router";//先引入Routes
const routes: Routes = [ 
{path: '',component:HomeComponent }, //当路径为空时，显示home组件

{path: 'product',component:ProductComponent},//当路径为product时显示product组件
{path: 'product/:id', component:ProductComponent}
{path:'**',component:Code404Component},//这个是通配符路由，当匹配不到导航的路径时，就会跳转到自己设定的code404组件
];
//注意：路径是有顺序的。如果把通配符放在了第一位，那么久找不到后面的页面了。

RouterOutlet

插座：当我用路由根据path导航到某个组件时候，这个组件会显示到这个插座的后面

<!-- app.component.html里面的设置-->
<div class="col-md-9">
        <router-outlet></router-outlet> //  通过路由设置，在插座这显示不同内容。
      </div>

Router

router在运行时执行路由的对象

RouterLink

routerLink用斜杠开头表示导航到根路由，./表示导航到子路由，这里我们是导航到根路由，所以点击主页之后会去app-routing.modules（路由配置）里面找到我们的所有根路由，然后找到名字匹配的根路由，展示相应的组件

<!-- 通过页面链接跳转的  -->
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product',1]">商品详情</a>

ActivedRoute

当前激活路由对象，主要用于保存路由，获取路由传递的参数。

1.参数快照（snapshot）：

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
//声明一个变量来接收路由传递过来的productId
private productId:number; 
//定义一个构造方法，注入ActivatedRoute参数
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
 //通过参数快照获得传递过来的id参数的值，然后赋给了productId
this.productId=this.routeInfo.snapshot.queryParams["id"]; 
  }
}

2.参数订阅（subscribe）：

import { Component, OnInit } from "@angular/core";
    import { ActivatedRoute } from "@angular/router";
    import { Params } from "@angular/router";
    @Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
    })
    export class ProductComponent implements OnInit {
    private productId:number; //定义一个变量来接收路由传递过来的productId
    constructor(private routeInfo: ActivatedRoute) { } 
    ngOnInit() {
    //参数订阅,订阅后声明一个匿名函数来处理传递过来的参数，从参数取出id 
       this.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);
      }
    }

多个路由区域

//访问 /news/ 时同时加载 NewsComponent 和 News2Cmponent 两个组件

{ path: 'news', outlet:'let1'  component: NewsComponent }
{ path: 'news', outlet:'let2'  component: News2Cmponent }

//html页面
<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>

重定向路由

路由守卫

适用于后台管理等需要登录才能使用的模块
创建一个认证服务

// app/auth.service.ts

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {
  canActivate() {
    // 这里判断登录状态, 返回 true 或 false
    return true;
  }
}

退出守卫

// app/deac.service.ts

import { Injectable }     from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot }    from '@angular/router';

// CanDeactivateComponent 是定义的接口,见下段代码
import { CanDeactivateComponent } from './can-deactivate.omponent';

@Injectable()
export class DeacService implements CanDeactivate<CanDeactivateComponent> {
  canDeactivate(
    canDeactivateComponent: CanDeactivateComponent,
    activatedRouteSnapshot: ActivatedRouteSnapshot,
    routerStateSnapshot: RouterStateSnapshot
  ) {
    // 目标路由和当前路由
    console.log(activatedRouteSnapshot);
    console.log(routerStateSnapshot);

    // 判断并返回
    return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true

  }
}

// can-deactivate.omponent.ts

// 接口组件, 返回 true 或 false 如表单发生改变则调用对话框服务
export interface CanDeactivateComponent {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

//路由设置
{
  path: ...,
  canDeactivate: [DeacService],
  component: ...
}

//模块中添加服务
providers: [
  DeactivateGuardService
]