Angular 路由初识

Routes：根组件注入

RouterOutlet：放在app.component.html，作为路由指定显示位置的指令

Router：component中用

RouterLink：template HTML中用

ActivatedRoute：component.ts中获取路由参数等

问题：

进入首页

点击“产品”

点击“商品详情”

回到首页

点击“产品”，可以看到路由变化，但是页面ID没有变化

**

这是因为，每次回到主页再进入详情页，是详情页每次重绘的过程，都会走init方法

但是从详情页到详情页，init只走了一次，不会重绘ID，所以有以上问题。

解决办法就是参数订阅subscribe

订阅就是，每次值有改变都会重新接收，重新绘制

路由重定向

 

app-routing.modules.ts

父路由template，注意写法，是 ./ 开头

分三步

1. 在app template主路由插座之后定义辅助路由插座，必须有name属性，值随便
2. 在app routing模块中定义路由，添加outlet属性，对应辅助路由插座的name属性值，定义
   组件显示位置
3. 跳转路由时，在routerLink中，通过 outlets对象，指定辅助路由跳转的组件，注意对应辅助路由name属性值

可以通过以上两种方式，指定跳转辅助路由时主路由的跳转：

1. routerLink，第一个数组元素指定主路由
2. outlets对象添加primary属性指定主路由

辅助路由的url：

http://localhost:3100/home(aux:chat) 

问题：跟子路由有什么区别呢？？？

区别：

子路由：

是某一组件的子组件，也就是说，依附于某组件，在某组件出现后触发，跳转，路由格式：

                                    某路由      子路由   辅助路由

http://localhost:3100/product/1/seller/99(aux:chat)

辅助路由：

不依附任何组件，可以独立其他组件存在（例如聊天模块，一个网站任何页面都可以触发弹出聊天功能，）

通过一些钩子实现，即 路由守卫

代码：

创建守卫文件ts

实现对应方法，指定守卫条件：

在路由配置模块中，引入守卫ts文件，配置相应属性到指定组件上：

注意provider注入：

resolve守卫：

当进到一个页面，需要请求数据绑定页面，这时初始状态会有绑定位置都是空的状态的情况，resolve就是解决这个问题，预先读取数据，带着读取的数据再跟路由一起跳过来。

注意装饰器