频道栏目
首页 > 网络 > 路由器 > 正文

angular4路由(路由传递参数)

2017-07-08 10:41:21      个评论    来源:qq_34645412的博客  
收藏   我要投稿

angular4路由(路由传递参数)

1.当页面输入一个存在的地址的时候会报错。这个时候需要设置一个空页面提示用户此页面不存在。这个空页面需要用一个通配符来配置路由导航。注意的是通配符的路由必须放在最后来配置路径,避免一开始查找路径,还未遍历所有路径就已经跳入通配符路由的页面。

{path:'',component:HomeComponent},
{path:'product',component:ProductComponent},
{path:'home',component:HomeComponent},
{path:'**',component:Code404Component}

2.在路由中传递参数:

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

商品详情

添加一个指令,这个指令指到一个对象上,当点击商品详情的时候会带着id=1这个参数调到商品详情页

结果:https://localhost:4200/product?id=1(?id=1就是从路由里面传递过来的参数)\

那么怎么样接收这个参数呢?

就需要在接收参数的页面里面注入ActivateRoute

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

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

}

注入之后在本地创建一个变量productId来接收传递过来的参数:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} 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 routerIonfo:ActivatedRoute) { }
  ngOnInit() {
    this.productId=this.routerIonfo.snapshot.queryParams["id"];
  }
获取到了ID后可以在商品详情页用差值表达式将其显示在页面上

商品ID是{{productId}}

2.在URL在路由路径path中传递数据

在path中传递参数就需要先修改原有的路径使其可以携带参数。修改前:

const routes:Routes=[
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'home',component:HomeComponent},
  {path:'**',component:Code404Component}
];
修改后:
const routes:Routes=[
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量,一段是路径,一段时参数
  {path:'**',component:Code404Component}
];
修改完成后需要在路由的链接处也就是路由的入口处修改入口属性,用来传递路由所携带的参数值;
主页
商品详情
主页这里的routerLink是一个数组,第一个值为路由的跳转路径,第二值为路由携带参数的值,这里传递的值为2

页面结果:

https://localhost:4200/home/2

最后一步获取传递的这个参数:

获取参数值是从URL里面取,和查询参数一样的获取方法,唯一不一样的就是把从查询参数里面获取值变成从URL里面获取,只需要将queryParams改为params就可以了:

export class HomeComponent implements OnInit {
  private  homeId:number;
  constructor(private routerIonfo:ActivatedRoute) { }
  ngOnInit() {
    this.homeId=this.routerIonfo.snapshot.params["id"];
  }

}
最后用插值表达式在页面显示即可

特别注意的是不能同时使用参数查询方式和路由路径Url 方式传递同一个页面的参数;否则报错

例如:已经使用了参数查询方式

商品详情

再使用路由路径方式传递参数将报错:该路径找不到或者直接跳通配符路径404

detail(){
  this.router.navigate(['/product',1]);
}

最后记录一下参数订阅和参数快照:

首先什么是参数快照:获取路由中传递的参数的值得一个方法就用到了参数快照。snapchot

理解:在home里面采用了两个参数:

detail(){
  this.router.navigate(['/home',1]);
}
主页
这里在路由路径中想home同时传递了两个参数,1和2,

当在页面第一次加载的时候会创建一次主页,将2这个值传入页面,当点击按钮出发detail事件的时候也会导航到主页,但是在此之前主页已经被创建,并赋值,此时导航到主页,主页并不会再次被创建,所以自然不会再次获取第二次导航过来的路由所携带的参数和值,但是路径变为了https://localhost:4200/home/1

然而页面上的值仍然是2,获取当前路由所传递的参数值失败。这就是参数快照的弱点,为了解决这个问题引入了参数订阅:subscribe()

this.routerIonfo.params.subscribe((params:Params)=>this.homeId=params["id"]);
采用参数订阅的方式subscribe()获取到一个类型为Params的属性params,并返回params里面的Id复制给本地变量homeID,这样就不会出现路径在变,但是陆经理面的参数值不变的情况;

只有当你确定你的页面不会从自身路由到自身,或者只有一只方式路由到此页面的话就可以使用参数快照方式,不确定的话最好使用参数订阅的方式。

重定向路由:

指在用户访问一个特定的地址时,将其重定向到另一个指定的地址;

{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'product',component:ProductComponent},
{path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量,一段是路径,一段时参数
{path:'**',component:Code404Component}

上一篇:路由原理与路由表生成
下一篇:路由器修改wifi密码
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训

版权所有: 红黑联盟--致力于做实用的IT技术学习网站