Angular4.0_路由数据传递前端

在路由时传递数据

在查询参数中传递数据

/product?id=1&name=2=> ActivatedRoute.queryParams[id]

在路由路径中传递数据

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

在路由配置中传递数据

代码演示方式一：
在路由中配置：在查询参数中传递数据
app.component.html

主页商品详情

在组件中接收数据：
product.component.ts

import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from "@angular/router"; @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() { this.productId = this.routeInfo.snapshot.queryParams["id"]; }}

在组件中显示
product.component.html

这里是商品信息组件商品ID是：{{productId}}

文章图片

方式二：在路由路径中传递数据
在app-routing.module.ts修改path,后面添加一个id参数

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"; const routes: Routes = [ {path: '', component: HomeComponent}, {path: 'product/:id', component: ProductComponent}, {path: '**', component: Code404Component}, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

app.component.html
在routerLink中的数组中添加数据信息

主页商品详情

product.component.ts
修改获取属性方式this.routeInfo.snapshot.params["id"] 注意方式一用的是

this.routeInfo.snapshot.queryParams["id"];

import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from "@angular/router"; @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() { this.productId = this.routeInfo.snapshot.params["id"]; }}

文章图片

参数快照和参数订阅在app.component.ts中的点击事件toProductDetails中增加一个参数，它实际上跟上面的方式二的功能相同

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){}toProductDetails(){ this.router.navigate(['./product',3]); } }

在组件product.component.ts中依旧可以接收到参数
但是有个问题我们看一下，我们先点击主页，再点击商品详情

文章图片

再点击主页再点击商品详情的按钮

文章图片

我们发现数据被替换了，但是从商品详情直接点击商品详情按钮，发现数据是不会变化的

文章图片

因为在product.component.ts中的

ngOnInit() { 
 this.productId = this.routeInfo.snapshot.params["id"];
 
 }

中仅仅是从主页加载到本页的时候加载一次，从其他页面尽量不会再次加载，解决这种问题的方式就叫参数订阅。而我们现在使用的这种方式叫做参数快照snapshot。
【Angular4.0_路由数据传递】使用参数订阅的方式就能完美解决这个问题
product.component.ts

import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from "@angular/router"; @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() {//参数订阅 this.routeInfo.params.subscribe( (params:Params)=>this.productId = params["id"] ); //参数快照 // this.productId = this.routeInfo.snapshot.params["id"]; }}