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"]);