angular---路由之传值的三种方式

Angular

举例点击“股票详情”链接后，给这个页面传递ID参数，或者点击“股票详情”按钮传递ID参数

1、在查询参数中传值

在股票详情链接标签中加入“ [queryPamars]="{ID:1}" ”

在页面地址栏中会显示参数ID

在股票详情页面的控制器中写数据的接收

最终的效果：

2、在路由路径中传值

首先修改路由配置中的“path”属性，使之能携带参数

接下来修改“股票详情”链接中的routerlink里的值，其值是个数组，就是为了传参数用的，因此在路径后边可以添加参数的值

这时我们再看页面地址栏中stock后直接就跟着参数的值，我们把 ‘值’ 直接拼接在后面了

在股票详情页面的控制器中写数据的接收

最终效果是

---

接下来我们讲下参数订阅

我们修改下“股票详情”按钮的方法，使之能接收参数

但是我们会发现，由主页转到股票详情页面时，无论我们点击“股票详情”链接还是“股票详情”按钮，都无法显示正确的ID值

点击“股票详情”按钮后，下面ID的值应变为2，但是没有变

造成这个原因是因为从别的页面路由到“股票详情”页面时，会调用控制器中的ngOnInit()方法，所以会执行ngOnInit()里的语句从而接收ID的值。但是当我们在“股票详情”页面里点击“股票详情”链接还是“股票详情”按钮时都不会触发创建ngOnInit()方法，所以就不会改变ID的值。因此为了解决这个问题，我们使用参数订阅这个方法。

参数订阅：

最终结果

3、在路由配置中传值

在路由配置里，目标组件后边，添加数据data，data是一个数组

在“股票详情”控制器中写代码接收data里的数据

最终效果：

下转：angular--路由之重定向路由