angular4 路由基础

[chenbj2333]

路由相关对象

1 Routes
路由配置，保存着哪个url对应展示哪个组件，以及再哪个RouterOutlet中展示组件。
2 RouterOutlet
在html中标记路由内容呈现位置的占位符指令。
3 Router
负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。
4 RouterLink
在html中声明路由导航用的指令。
5 ActivatedRoute
当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等。

例子：
1 app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', component: Code404Component}
];

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

2 在app.module.ts中导入AppRoutingModule模块

3 app.component.html
<a [routerLink]="['/']">主页
<a [routerLink]="['/product']">商品详情s
<button (click)="toProductDetails()">商品详情

4 app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private router: Router){}

  toProductDetails() {
    this.router.navigate(['/product']);
  }
}

路由参数

1 传递参数
<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详情
接受参数
constructor(private routeInfo: ActivatedRoute){}
this.productId = this.routeInfo.snapshot.queryParams['id'];
2 在路由配置中携带参数
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'product/:id', component: ProductComponent},
{path: '**', component: Code404Component}
];
修改路由链接的参数来传递数据
<a [routerLink]="['/product', 1]">商品详情 或者 this.router.navigate(['/product', 1]);
this.productId = this.routeInfo.snapshot.params['id'];

参数快照和参数订阅

snapshot参数快照
this.productId = this.routeInfo.snapshot.params['id'];
subscribe参数订阅
this.routeInfo.params.subscribe((params: Params) => {
this.productId = params['id'];
});

重定向路由

const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'product', component: ProductComponent},
{path: '**', component: Code404Component}
];

子路由

路由配置
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'product/:id', component: ProductComponent,
children: [
{path:'', component: ProductDescComponent},
{path:'seller/:id', component: SellerInfoComponent}
]
},
{path: '**', component: Code404Component}
];
使用
ProductComponent对应的html中
<a [routerLink]="['./']">商品描述
<a [routerLink]="['./seller', 99]">销售员信息

辅助路由

{path: 'xxx', component: XxxComponent, outlet: 'aux'}
{path: 'yyy', component: YyyComponent, outlet: 'aux'}

<a [routerLink]="[{outlets: {primary: 'home', aux: 'xxx'}}]">Xxx
<a [routerLink]="['/product', {outlet: {aux: 'yyy'}}]">Yyy

路由守卫

通常当需要满足某些条件时，才可以导航到下一个路由
例如，只有当用户已经登录并且拥有某些权限时才能进入某些路由。或者用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。或者当用户未执行保存操作而试图离开当前导航时。

1 CanActivate：处理导航到某路由的情况。
2 CanDeactivate：处理从当前路由离开的情况。
3 Resolve：在路由激活之前获取路由数据。

resolve守卫

使用resolve守卫可以预先在进入路由之前去服务器上读数据，然后把需要的数据读好之后进到这个路由里面，然后立刻就可以把这些数据显示出来。