angular5學習筆記 路由通信

首先在路由字典中，接收值的組件中加上：/：id

在發送值的組件中，發送值的方式有幾種。

第一種：<a routerLink="/detail/1">新聞詳情1</a>

利用routerLink，在跳轉的組件后加上要傳過去的值

 

接着在接收值的組件中，也就是detail組件里，引入ActivatedRoute，並實例化

然后需要使用route，就能獲取傳過的值

 

 *navigate的用法

1.以根路由跳轉/login

this.router.navigate(['login']);

 

2.設置relativeTo相對當前路由跳轉，route是ActivatedRoute的實例，使用需要導入ActivatedRoute

 

this.router.navigate(['login', 1],{relativeTo: route});

 

3.路由中傳參數 /login?name=1

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

 

4.preserveQueryParams默認值為false，設為true，保留之前路由中的查詢參數/login?name=1 to /home?name=1

this.router.navigate(['home'], { preserveQueryParams: true });

 

5.路由中錨點跳轉 /home#top

this.router.navigate(['home'],{ fragment: 'top' });

 

6.preserveFragment默認為false，設為true，保留之前路由中的錨點/home#top to /role#top

this.router.navigate(['/role'], { preserveFragment: true });

 

7.skipLocationChange默認為false，設為true，路由跳轉時瀏覽器中的url會保持不變，但是傳入的參數依然有效

 

this.router.navigate(['/home'], { skipLocationChange: true });

 

8.replaceUrl默認為true，設為false，路由不會進行跳轉

this.router.navigate(['/home'], { replaceUrl: true });