Angular路由

spa singal page application 单页应用  一个单页应用只加载一次不在刷新只改变页面上部分内容

angular中的路由器  根据用户的操作改变页面的内容并不是重新加载页面

视图状态 spa可以理解为视图状态的集合。

 

建项目 ng new router --routing 

项目会多出 app-routing-module.ts 里面是路由的配置

路由的基础：

      路由相关对象 1 routes 2 routerOutLet 3 router 4 routerLink 5 ActivatedRouter

      路由的配置 再app-routing-module.ts里

      import {Test1}  from "路径";

       import {Test2}  from "路径";

     const router:Routers =[

      {path:"",component : Test1},

      {path:"random",component : Test2}

      ];  注意path不能加/开头

     在 app-component-html里会自动生成<router-outlet></router-outlet>

     在app-component-html里写显示不同页面的时候用到了 routerLink示例

     <a [routerLink]=['/']>主页</a>

     <a [routerLink]=['/random']>详情页面</a>  这表示导航到根路由 加./能匹配子路由

     routerLink的参数是个数组 因为除了地址可以再加其他的参数

     angular数据绑定方式三  事件绑定 例如 <input type = "button" value="商品详情" (click)="toDetail">

   在控制器中  

   constructor(private router:Router) {

   }

   toDetail() {

  this.router.navigate(['/random']);

  }

 

  如果在地址栏乱输路径 f12会报一堆错 需要通配符配置

  导一个404组件 ng g component 404code

  在路由配置中添加一个配置 {path:'**',component:Code404}

  配置的顺序问题 像通配这种公用的一般放在最后，放前面容易直接导航到通配页面

 

  如何在路由时传递数据 方法有三种： 

1 在查询参数中传递数据   /random?id=1&name=2      ActivatedRouter.queryParams[id]

2 在路由的路径中传递数据  在定义路径时 {path:'/random/:id'} => /random/1 =>   ActivatedRouter.queryParams[id]

3  在路由配置中定义数据  {path:'/random',component:Test2,data:[{isProd:true}]} =>

ActivatedRouter.data[0][isProd]

(1)在页面中 写法  第一个 在 [routerLink]后再加一个参数  [queryParams] = "{id :1 }" 就是第一种

在 js中获取这个参数写法

定义id  private productId:number;

constructor (private routeInfo:ActivatedRouter) {}

在ngOnInit（）中 this.productId = this.routeInfo.snapshot.queryParams["id"]; snapshot参数快照

this.routerinfo.params.subscribe(（params:Params）=> this.productId=params["id"]);参数订阅

(2) 修改路由配置中的属性  {path:'/random/:id'}  在页面中 [routerLink] = ['/random',1], ngOnInit()中改成this.productId = this.routeInfo.snapshot.params["id"];

 

路由的重定向

在路由的配置中这么写

 const router:Routers =[

      {path:"",redirectTo:'/random',pathMatch:'full'},

      {path:"random",component : Test2}

      ]; 

 

子路由

路由配置 添加 children属性 

{path :  'home', component:HomeComponent,children:[{path:'/yyy',component:TestComponent},{path:'/xxx',component:Test2Component}...]}

实现：ng g component productDesc 商品描述组件

          ng g component  sellerInfo      销售员信息组件

          页面中调用子路由的路径要注意  写成 ./控制器名    ./是表示是再当前页面组件下的子路由

 

辅助路由 

需要三步实现 1 除了主的说明多加含name属性的插座说明 

                        <router-outlet></router-outlet>          //主的

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

第二步  路由配置中  配置项添加  <path ：'...',component:...,outlet:'aux'>

第三步 页面导航的时候指定   <a [router-link]="['/home',{outlets:{aux:'xxx'}}]"></a> 注意 primary 属性

 

 

路由守卫   满足了特定要求才能导航到路由或者离开路由

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

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

          Resolve 在路由激活前获取路由数据

           1 canActivate  返回布尔型 在路由的配置中加 canActivate属性  canActivate:[LoginGuard]

             可以多个，一次调用，只要一个返回false就被拦截，方法的参数可以不要

             在 @NgModule中再申明 providers:[LoginGuard]  实例化   依赖注入

          2 canDeactivate 和上面的区别是 有泛型需要指定组件的类型 方法有组件的参数

          3 resolve守卫 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3833897/blog/1832533