Angular4笔记(二)

（一）路由介绍：

      1：几个关键词的简介

    2：每个关键词应该用到的地方

3：一个简单路由的配置，实现的效果如图

  1：先生成两个组件（Home，Product）

   2：app-routing.module.ts(这个文件在你创建项目的时候后面加一个参数 -routing  例如：ng new myAngular -routing)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';

//Routes：这里是根路由
const routes: Routes = [
  //path：指路由的路径。component：指路由的目标组件
  { path:'' , component:HomeComponent},
  { path:'product' , component:ProductComponent}, 
  
  //这里配置的是一个页面不存在的路由
  { path:'**' , component:Code404Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(){

  }
 }

app.component.html

主页




商品详情

 home.component.html

  这是HomeComponent!

product.component.html

  这是ProductComponent!

(二)路由传递参数

     路由传递参数（1：在查询参数中传递参数   2：在路由路径中传递参数）

1：在查询参数中传递参数 

     

app.component.html  以queryParams传递参数

<--  1:用参数来传递商品属性的值。queryParams传递参数id的值为1-->
商品详情

product.component.ts    用ActivateRoute接收

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId:number;
  constructor(private  routeInfo:ActivatedRoute) {
    
   }

  ngOnInit() {
    // 1:接受以路由参数传过来的参数，ActivatedRoute当前激活的路由对象，可以获取路由地址，以及路由参数
    this.productId=this.routeInfo.snapshot.queryParams["id"];
   
  }

}

product.component.html   用差值表达式在页面接收显示

  商品的id为：{{productId}}

2：在路由路径中传递参数 （主要是传递和接收和上一种方式不一样，其他都一样）

   app-routing.module.ts文件修改path

 //2:以URL的方式传商品属性的值
  { path:'product/:id' , component:ProductComponent},

  product.component.ts   修改接收用params

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

app.component.html

商品详情

**************************************************************

参数快照和参数定略（注：当一个路由从自身路由到自身使用参数定略的方式，反之参数快照的方式）

  // 1：参数快照方式。由于OnInit()在组件创建的时候只执行一次，所以第二次获取商品id的时候还是第一次传过来的值
    this.productId=this.routeInfo.snapshot.params["id"];
  //2:参数定略方式（完美的解决了参数快照的问题）。this.routeInfo.params.subscribe会获得一个params的值然后把params["id"]赋值给productId
    this.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

（三）路由重定向

//路由重定向：当''路由过来时先重定向到/home然后在到home
  {path:'',redirectTo:'/home',pathMatch:'full'},
  //path：指路由的路径。component：指路由的目标组件
  { path:'home' , component:HomeComponent},