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

    <!-- 轮播图 -->
    <div class="row carousel-container">
      <app-carousel></app-carousel>
    </div>
    <!-- 商品信息 -->
    <div class="row">
      <app-product></app-product>
    </div>

     

  • app.component.html

    <!-- 导航栏 -->
    <app-navbar></app-navbar>
    <!-- 中间栏 -->
    <div class="container">
      <!-- 侧边搜索栏 -->
      <div class="col-md-3 col-xs-12 search-container">
        <app-search></app-search>
      </div>
    
      <!-- 右边内容栏 -->
      <div class="col-md-9 col-xs-12">
    
        <!-- 将原本的轮播图与商品界面替换成一个插座 -->
        <router-outlet></router-outlet>
        
      </div>
    </div>
    <!-- 底边栏 -->
    <app-footer></app-footer>
    

     

  • detialproduct.component.html

    <div class="row">
        <img src="http://placehold.it/1000x350" alt="">
    </div>
    <div>
      <p>商品ID：{{productName}}</p>
      <p>商品名称：{{productId}}</p>
    </div>
    
    
    

     

• 配置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界面

  <div class="row">
    <div class="col-lg-4 col-md-4 col-xs-12" *ngFor="let product of products">
      <div class="thumbnail">
            <img src=" https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3671643272,946673945&fm=26&gp=0.jpg"
        alt="">
        <div class="caption">
          <h3 class="pull-right">￥{{product.price}}</h3>
          <!-- 点击商品名称跳转到商品详情页，传递两个参数id，name -->
          <a [routerLink]="[ '/detialproduct', product.id , product.name ]"><h3>{{product.name}}</h3></a> 
          <p>{{product.desc}}</p>
          <p>
            <!--星级评价的rating属性由产品的rating属性传进去-->
            <app-stars [rating]="product.rating"></app-stars>
            <span>  {{product.rating}} 星</span>
          </p>
        </div>
      </div>
    </div>
  </div>
  

   

• 配置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.界面展示