Angular4.0路由导航简单介绍

准备工做：

1.在控制台上用 ng new routerDemo --routing,新建一个具备路由功能的augular项目

2.在控制台上用 ng g component (组件名字) ,创建两个组件，home组件和product组件

学习路由，必需要知道如下几个与路由相关的对象的做用以及这些对象所在位置

由上可知：

1.Routs是一个集合了所有路由地址的对象，通常写在app-routing.module.ts或app.component.ts中

若是想一进入某个网址就自动跳转至另个网址地址，好比一旦点击了“/a”连接就自动跳转到“/b”网页，要作到这个需求就要重定向路由。这里以一进去网站就跳转到“/home”做为例子

若是是用户输入了错误的地址，没有该页面，则对用户提示没有存在该页面，则在路由配置的最后一行写上下面的代码，注意！必须是最后一行，不然其余页面就会被匹配到错误页

2.在AppComponent中的Html中，RouterOutlet负责了路由组件的内容的展现，在主页中起到了占位符的做用；而RouterLink是点击该标签后路由到哪一个组件；

3.能够用Router来导航到另外一个指定的路由，通常写在须要导航到特定路由的ts，在我这里是写在了appComponent.ts中。使用它是必需要引入相应的对象，以及在构造函数中实例化一个对象

4.ActivatedRoute保存着路由的参数，路由地址等，通常用来接收路由传参，用法和Router同样，也是先引入ActivatedRoute，实例化对象，写在接收参数的ts,好比app.componet向detai.component传了参 ，那就在detail.component.ts写AcivateRoute

再点击demo页面时，若是先点击了”详情“按钮，再点击”ActivatedRoute详情按钮“会发现上url上已经有传参了，但是id没值；但是若是反过来先点击”ActivatedRoute详情按钮“，再点击”详情“，就会发现url已经没有参数，但是id的值却仍是存在的。

会出现这个缘由，是由于，this.id=this.routerInfo.snapshot.queryParams["id"];中snapshot是快照信息，你能够理解为缓存，而这两个按钮相互点击进去的是同一个组件，也就是路由自身是不会触发 ngOnInit()，那写在其底下的id赋值就没有，第一次被赋的值就一直都是它的值。解决这个问题就要用到路由订阅，把上面那行代码改成this.routeInfo.params.subscribe((params) => this.id = params["id"]);