angular4学习笔记(第二章 路由篇)

1.路由导航

2.创建带有路由的项目

ng new routerdemo --routing

3.Routes、RouterLInk、RouterOutlet组合的用法

• 配置app-routing.module.ts
• 在需要用到路由的组件中插入RouterLink导航指令（此处使用app.component.html）
• 在路由指令界面需要的地方放入路由插座RouterOutlet

4.Routes、Router、RouterOutlet组合的用法

• 和RouterLink用法的差别在于RouterLink的导航在html界面实现，Router的导航在ts中实现
• 在需要用到路由的组件中插入导航指令click事件（此处使用app.component.html，这里为了方便阅读所以创建了两个方法，实际中可以创建一个传参的方法来实现，减少代码）                                                       
• 在ts中实现导航

5.ActivatedRoute路由传参的使用

• 在查询参数中传递数据

  • 在路由链接中加入[queryParams]属性绑定（RouterLink方式）
  • 在路由链接中加入[queryParams]属性绑定（Router方式）
  • 获取传递数据(参数快照方式)
  • 获取传递数据（参数订阅方式）
• 在路由路径中传递数据
  • 配置app-routing.module.ts
  • 传递多个参数    path: "product/:id/:name"
  • 在路径中传递数据（RouterLink方式）
  • 在路径中传递数据（Router方式）
  • 获取传递数据（参数快照方式）
  • 获取传递数据（参数订阅方式）
• 在路由配置中传递数据
  • 配置app-routing.module.ts
  • 获取传递数据（参数快照方式）
  • 获取传递数据（参数订阅方式）
• 参数快照与参数订阅的区别
  • 参数快照，就如照片一样，拍摄到那一刻（ngOnInit）是什么就是什么，不会动态知道值的变化。
  • 参数订阅，既然我订阅了，你有新的变化，都要告诉我，我随时都知道。
  • 参数快照是为了防止出现自身路由到自身时参数改变的情况。一直保持着第一次创建组件时的参数值。
  • 参数订阅则相反，只要参数改变了，获取到的值就会改变。
  • 在开发中，如果确定不会从自身路由到自身就可以用参数快照的方式，如果不确定就用参数订阅的方式。

6.重定向路由

• 使用方式                                                                        

7.子路由

• 配置app-routing.module.ts
• 在父路由界面中配置插座和路由导航（注意子路由在路径前有"./"，根路由为"/"，/是从根路由开始找，./是从当前路由开始找）                                               
• 子路由一般用于在组件之中嵌套组件，可以无限嵌套

8.辅助路由

• 能够使一个组件定义多个插座
• 大致用法
• 插入辅助路由                                                
• 配置app-routing.module.ts文件
• 导航指令配置（RouterLink方式）
• 导航指令配置（Router方式）
• 同时控制主路由与辅助路由

9.路由守卫

• 分为三种路由守卫
• CanActivate使用方法
  • 创建编写一个ts（开发中为创建一个服务）来判断是否可以进入被守护的路由
  • 配置app-routing.module.ts
• CanDeactivate使用方法
  • 创建编写一个ts（开发中为创建一个服务）来判断是否可以离开被守护的路由，CanDeactivate与CanActivate不同在于需要提供组件的泛型（用于守卫哪个组件，就填入哪个组件）
  • 配置app-routing.module.ts
• reslove使用方法（下次补充）

10.更新上次界面的代码

• 将product界面与carousel界面放到一个home组件中   ng g c home   ,生成一个商品详情组件  ng g c detialproduct
  • home.component.html

     

  • app.component.html

     

  • detialproduct.component.html

    
        
    
    
      
    商品ID：{{productName}}
      
    商品名称：{{productId}}
    
    
    
    

     

• 配置app-routing.module.ts

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { DetialproductComponent } from './detialproduct/detialproduct.component';
  import { ErrorComponent } from './error/error.component';
  
  const routes: Routes = [
    // 路由重定向
    {path : '' ,redirectTo : 'home' ,pathMatch : 'full'},
    // 默认主界面
    {path : 'home' ,component : HomeComponent},
    // 商品详情，传递两个参数
    {path : 'detialproduct/:id/:name' ,component : DetialproductComponent},
    // 无匹配情况
    { path: "**", component: ErrorComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

   

• 配置跳转导航，product.component.html界面

  
    
  
      
  
            
        
  
          
  ￥{{product.price}}
          
          
  {{product.name}} 
          
  {{product.desc}}
          
  
            
            
              {{product.rating}} 星
          
        
      
    
  
  

   

• 配置detialproduct.component.ts,接收参数并显示

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Params } from '@angular/router';
  
  @Component({
    selector: 'app-detialproduct',
    templateUrl: './detialproduct.component.html',
    styleUrls: ['./detialproduct.component.css']
  })
  export class DetialproductComponent implements OnInit {
  
    // 声明两个变量接收参数
    private productName :string ;
    private productId : number;
  
    constructor(private routerinfo : ActivatedRoute) { }
  
    ngOnInit() {
  
      // 使用参数订阅方式获取数据
      // 以为此处确定不会自身路由到自身路由，所以选择使用参数快照方式
      // this.routerinfo.params.subscribe((params : Params) => this.productName = params['name'] );
      // this.routerinfo.params.subscribe((params : Params) => this.productId = params['id'] );
  
      // 使用参数快照方式获取数据
      this.productName = this.routerinfo.snapshot.params['name'];
      this.productId = this.routerinfo.snapshot.params['id'];
    }
  
  }
  

   

11.界面展示