Angular:路由参数传递

前端之家收集整理的这篇文章主要介绍了Angular:路由参数传递前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

路由参数传递

查询参数时传递数据

首先设置查询参数

<a [routerLink] = "['/stock']" [queryParams] = "{id:1}">股票</a>

queryParams是什么鬼

然后在跳转组件中设置ActivatedRoute,包含当前路由对象的信息

export class StockComponent implements OnInit {

  private stockID:number;

  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {

    this.stockID = this.routeInfo.snapshot.queryParams["id"];
  }

}

路由路径中传递数据

首先在path中设置:

const routes: Routes = [
    {path:"",component:HomeComponent},{path:"stock/:id",component:StockComponent},{path:"**",component:Err404Component}
];

然后在对象的链接中设置具体的参数值:

<a [routerLink] = "['/stock',1]">股票</a>

最后在控制中:把queryParams改为params

ngOnInit() {

    this.stockID = this.routeInfo.snapshot.params["id"];
  }

参数快照

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

参数订阅

this.routeInfo.params.subscribe((params:Params)=>this.stockID = params["id"]);

参数订阅解决了在同一页面,参数不变的问题。

路由配置中传递数据

这个是基于data的

{path:"stock/:id",component:StockComponent,data:[{isPro:true}]},

data是一个数组,里面可以放置多个对象

最后通过ActivatedRoute获取

this.isPro = this.routeInfo.snapshot.data[0].isPro;
原文链接:https://www.f2er.com/angularjs/146063.html

猜你在找的Angularjs相关文章