angualr JS跳转GET传值

一：什么是动态传值与get传值？

在这要区分一个概念：动态传值与get传值。angualr的动态传值如下，当我点击"新闻详情1"时，路由跳转到的是新闻详情的页面地址栏跟上的是当前点击页面的标记(也可理解为id的标识)，这是第一条新闻，这是第二条新闻。。第三条。。等等。后面之间跟数值，数值1，数值2，数值3，是动态的，会发生变化，这叫动态路由传值，并没有加上 id=123$name=ttt,而get传值的地址栏会与这不同，get传值会发生变化。

点击之前 点新闻详情1后 点新闻详情2后 get传值地址栏效果

想要实现这样的地址栏效果，目前的路由配置是实现不了如下，我新建了两个新的组件：ng g c components/shop   ng g c componets/shoplist  (失误打错字母)

想利用这两个组件实现get传值

新组件的路由配置

可能你会考虑到，直接在跳转的后面加上后缀，如图所示：

错误的示范

又或者，有人会考虑到用href来实现;

可以实现，但不推荐

是可以实现效果的，但是并不推荐，因为我们在路由的跳转中是不会重新刷新地址栏的，而href是刷新了一次地址栏，重新加载了一次。

所以，我们换一种方式。

JS跳转是 经过事件触发的，所以我们新建一个button 在其点击事件上面操作。

shop组件html页面

现在TS页面，自定义方法，以及传参的设置，记得引入需要的组件。

shop组件TS页面传参设置

传参的目的是在shoplist组件接收参数。

shoplist组件ts页面接收参数

然后在console 中可以观察到一切OK。

效果