angular4路由

一、介绍

• angular使用SPA，只是改变页面上部分内容的应用。angular中使用路由器实现根据用户操作改变页面内容而不重新加载页面。
• 路由器：控制整个视图状态的对象。
• 路由器为每个视图状态分配一个唯一的url，利用url使应用跳到某个特定的视图状态。

命令：ng new router --routing

路由相关对象

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

Router和Routerlink作用一样，用来让应用导航到指定的路由上，router在控制器中使用，通过调用方法进行导航；RouterLink在Html模板中，用在a标签上。

应用组成

• angular应用由一些组件构成，每个组件都有自己的模板和控制器，应用在启动后首先展示AppComponent模板，所有的组件都被封装在一个模块中，而路由的配置（Routes对象）存在在模块中。

• Routes对象由一组配置信息组成，每个配置信息至少包含两个属性。

  • path属性用来指定浏览器中的url。
  • component属性用来指定相应的组件

说明：

1. 在模板中使用RouterOutlet指令指定组件位置；
2. RouterLink指令在模板上生成一个链接到其他组件的链接；
3. 在组件的控制器中调用Router对象的navigate方法改变浏览器地址，实现路由转换；
4. 在路由时通过url传递数据，这些数据保存在ActivatedRoute中（如：从组件A路由到组件B时，组价B中的ActivatedRoute对象来获取url中携带的参数）。

二、使用

项目文件

• 使用ng new router --routing生成的项目比ng new project生成的项目多生成路由配置文件—app-routing.module.ts，生成了AppRoutingModule模块；
• 在app.module.ts中会有声明，引入AppRoutingModule模块，如下：

import { AppRoutingModule } from './app-routing.module';

路由配置

• 创建两个组件；
• 在app-routing.modult.ts中配一个空路由；

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

注： 在做路由配置时path属性不要用'/'开头，因为angular本身会根据path的值做相应的解析生成url。

• 在app.component.html中自动加入<router-outlet></router-outlet>
• link访问路由写法：<a [routerLink]="['/']">主页</a>
• 通过调用方法访问路由的写法：

<input type="button" value="我是详情" (click)="toStockDetail()">

方法在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){

  }
  toStockDetail(){
    this.router.navigate(['/stock']);
  }
}

• 当用户访问的路由不存在时，页面出错，可以通过配置通配符解决问题。 创建一个新的组件，在路由配置中加{path: '**', component: Code404Component}

注： 通配符写在整个路由配置的最后面。

数据传递

方式

1. 在查询参数中传递数据

   • 路由路径？参数名=参数值
   • /product?id=1&name=2 => ActivatedRoute.queryParams[id]

2. 在路由路径中传递数据

   • 指定路由路径加参数名=>在实际路径中携带的参数=>调用
   • {path:/product/:id}=>/product/1=>ActivatedRoute.params[id]

3. 在路由配置中传递数据

   • 通过data参数定义静态数据，data本身为数组。
   • {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.data[0][isProd]

4. 在url中传递参数

   • 修改路由配置中的path属性，使其可以携带参数。
   • {path: 'stock/:id', component: ProductComponent, data:[{isPro:true}]}
   • 修改路由链接，让链接在跳转时携带参数。
   • <a [routerLink]= "['/stock',1]" >url获取参数</a>

参数快照与参数订阅

• 参数快照：传参方式与前面记录相同。当从主页跳转到详情页时，详情页组件被创建，调用ngOnInit()方法，但是，当详情页跳转到详情页时（两个传参不同），组件不会被重新创建，ngOnInit()方法在同一组件路由到自身时不会被调用。

this.id = this.routerInfo.snapshot.params["id"]

• 参数订阅：订阅方式改变参数值时，每当路由参数变换时，匿名的方法都会被调用一次。

this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])

重定向路由

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

pathMatch:'full'表示只有访问路径是精准的空字符串时才跳转到/home上。

{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}

pathMatch:'prefix'表示路径是以“xx”开头就可跳转到/home上。

子路由

在原有路由的基础上加children属性。将router-outlet声明在哪个子路由就会显示在哪儿。由于声明的是子路由，在访问子路由时是不能以“/”开头的，“/”开头代表在主路由中找，子路由以“./”开头。

• 子路由可以一直嵌套；
• 路由信息和组件是分离的。

{path: 'stock', component: StockComponent,  children:[  {path: '', component:BuyerListComponent},  {path: 'seller/:id', component:SellerListComponent}  ]  }

辅助路由

在每个页面都有的一些侧边导航，会用到辅助路由。

• 在组件模板上除了外，还需要声明一个带name属性的。
• 在路由配置中去配置aux可以显示哪些组件。

{path: 'consult', component: ConsultComponent,outlet:"aux"}

• 导航时指定在路由到某个地址时，辅助路由上需要显示哪个组件。

<a [routerLink]="[{outlets: {aux: 'consult'}}]">开始</a><br>

说明：主路由的内容也可以控制，主路由没有设置名字，它有一个默认的关键字——primary，在aux前面加上primary:'home'，然后点击，主路由跳转到home。

路由守卫

路由守卫是一些拦截器，可以配在路由上面，在我们进入路由或离开路由之前执行一些逻辑。

守卫	简介
CanActivate	处理导航到某路由的情况，在导航到某路由前去执行一些判断，然后决定是否让当前导航生效。
CanDeactivate	处理从当前路由离开的情况。
Resolve	在路由激活之前获取路由数据，有助于提高用户体验。

转载于:https://www.cnblogs.com/boreguo/p/8287267.html