Angular Router 路由常用例子速查

Angular Router 路由常用例子速查

angular 版本12.x

觸發激活路由方式：

1. 鏈接激活

   鏈接標籤添加屬性routerLink='router'

   標籤可以添加routerLinkActive屬性:路由鏈接激活時，可指定在當前標籤添加class

2. JS執行導航方式

   this.router.navigate(['/url']);
   

路由傳參數-請求參數模式

請求參數模式是明文參數，都會在url鏈接上展示。

1. 請求參數 queryParams

   基本格式：Url?data=1

   1. 鏈接屬性上激活設置

      <a class="card" [routerLink]="/news" [queryParams]="dataObj">Link</a>
      

   2. JS激活設置

      // 查詢參數
      let query: NavigationExtras = {
        queryParams: {
          category: 'social',
          date: '2020-05-04'
        }
      };
      this.router.navigate(['/news' ], query);
      

2. 動態鏈接-鏈接佔位符

   基本格式：/url/news/1111

   需要先在路由中，設置對應的佔位符參數:

   const routes: Routes = [
     { path: 'news/:newsId', component: NewsDetailComponent },
   ];
   

   1. 鏈接屬性上激活設置

      可傳入一個數組，第二位數據，就是對應的參數值

      <a [routerLink]="['/news', item.newsId]" routerLinkActive="active" >
            title
          </a>
      

   2. js觸發

      與屬性模式，同理

      this.router.navigate(['/news', 11111]);
      

接受請求參數

導入ActivatedRoute,在init中,訂閱queryParamMap即可:

ngOnInit(): void {

  this.route.queryParamMap.subscribe((data: any) => {
    console.log(data.params);
  });
}