Angular路由及参数传递

生成一个新的项目 --routing会为我们生成路由相关的模块

ng new router --routing

路由相关的对象：

routes 路由的配置，保存了哪个url对应展示哪个对象，以及在哪个routerOutlet中展示。

routeOutlet 占位符指令，在html中标记路由呈现的位置。

router 负责在运行时执行路由的对象。

navigate()
navigateByUrl()

通过这两个方法来导航到一个指定的路由

routerLink 指令，用于在html中声名路由导航，可以传递参数，参数是一个数组类型。

ActivatedRoute 当前激活的路由对象 保存着路由信息，如地址，参数等

路由参数传递：

1.在查询参数中传递 queryParams

<a [routerLink]="['/'] " [queryParams]="{id:3}">首页</a>

效果 http://localhost:4200/?id=3

在对应的组件中接收，这里借助的是 ActivatedRoute 对象来获取参数

export class HomeComponent implements OnInit {

  constructor(private routerInfo: ActivatedRoute) {
  }

  private productId: number;

  ngOnInit() {
    this.productId = this.routerInfo.snapshot.queryParams['id'];
  }

}

2.在url中传递参数

修改app-routing.module.ts中的path配置，使其可以携带参数，并修改productComponent的routerLink

{ path: 'product/:id', component: ProductComponent }

<a [routerLink]="['/product',1]" >商品详情</a>

效果 http://localhost:4200/product/1

接收参数，只需要把上面第一种方式的queryParams替换为params就可以了

this.productId = this.routeInfo.snapshot.params["id"];

3.事件绑定传递数据

<input type="button" value="商品详情" (click)="toabc()">

定义我们绑定的方法

export class AppComponent {

  constructor(private router:Router){
  }
  toabc(): void {
    this.router.navigate(['/product', 2]);
  }
}

image.gif

在对应的组件中接收

this.productId = this.routeInfo.snapshot.params["id"];

image.gif

4.小问题补充

snapshot 参数快照 subscribe 参数订阅

this.routeInfo.params.subscribe((params:Params)=>this.productId=params['id']);

路由重定向

用户房顶一个特定的地址是，将其重定向到另一个地址。比如你打开www.didi.com结果打开了www.google.com

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

这一段的意思是，当我访问空路径时，当前路由重定向到home上，比较简单的内容。

子路由

路由的children属性添加

{
    path: 'product/:id', component: ProductComponent,
    children: [
      {path: '', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerComponent}]
  }

然后需要在ProductCompont.html中添加配置routerLint以及router-outlet

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>

这样我们就实现了子路由，同样我们仍然可以传递参数，接收方式与之前一致，从本质上来讲，子路由就是组件之间的 router-outlet形成的父子关系。

辅助路由

辅助路由 1.router-outlet name="xxxx" 2.outlet:"xxxx" 3.{outlets:{xxxx:"yyy"}}

本质就是一个路由允许定义多个 router-outlet

1.app组件中重新定义一个router-outlet

<router-outlet name="aux"></router-outlet>

2.单独开发一个组件

2.通过路由配置控制

{path: 'chat', component: ChatComponent, outlet: 'aux'}

增加两个链接，注意outlets不是outlet

<a [routerLink]="[{outlets:{aux: 'chat'}}]"> 开始聊天</a>
<a [routerLink]="[{outlets:{aux: null}}]"> 结束聊天</a>

点击开始聊天,浏览器显示结果： http://localhost:4200/home(aux:chat)

补充，如果我们想不管我们在哪里，都希望主路由是home,可以这样更改，添加primary:'home'

<a [routerLink]="[{outlets:{primary:'home',aux: 'chat'}}]"> 开始聊天</a>

路由守卫

需求：只有当用户登录获取某些权限时候才能够进入某些路由 或者 当用户未执行保存操作而试图离开当前导航时提醒用户。

CanActivate 处理导航到某路由的情况

CanDeactivate 处理从当前路由离开的情况

Resolve 处理在激活路由之前获取路由数据，这样在进入路由后数据展示会更快

创建文件，模拟登陆逻辑和离开的逻辑

login.guard.ts

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

export class LoginGuard implements CanActivate {

  canActivate() {
    let loginIn: boolean = Math.random() < 0.5;
    if (!loginIn) {
      console.log('用户没登录');
    }
    return loginIn;
  }
}

unsave.guard.ts 这里需要将需要守卫的路由作为泛型传递过去

import {CanDeactivate} from '@angular/router';
import {ProductComponent} from '../product/product.component';

export class UnsaveGuard implements CanDeactivate<ProductComponent> {
  canDeactivate(component: ProductComponent) {
    return window.confirm('你还没有保存操作内容哦,要离开?');
  }
}

接下来，去改写路由的配置 app-routing.modules.ts 我们只针对product做操作

{
    path: 'product/:id', component: ProductComponent,
    children: [
      {path: '', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerComponent}],
    canActivate: [LoginGuard],
    canDeactivate: [UnsaveGuard]
  }

注意不要忘了

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsaveGuard]
})

然后就可以愉快的玩耍了。。。