angular 路由跳轉以及傳參

1. 路由跳轉方式一： /路由?id='001' 方式 -- queryParams 方式

　路由配置：{ path: 'details', component: bookDetailsComponent }

   a.  指令跳轉：

　　<a [routerLink]="['/details']" [queryParams]="{id: item.id}" style="color:blue; font-size: 12px;cursor:pointer">查看詳情</a>

　　routerLink： 跳轉的路由，數組形式，傳參有兩種寫法： 1. 使用 [queryParams]="{id: item.id}"， 2. [routerLink]="['/details'， id]", 數組第一個值是　　　　　　　　　　　　路由，第二個值是要傳遞的參數

  b. js 實現跳轉：

　　

其中 this.router 是 Router 的實例

import  { Router } from '@angular/router'

constructor(private router: Router) {

 }

 jumpDetial(bookId: string): void {

        this.router.navigate(['/details'], {

            queryParams: {

                id: bookId

            }

        })

    }

this.router.navigate(['user', 1]); 以根路由為起點跳轉

this.router.navigate(['user', 1],{relativeTo: route}); 默認值為根路由，設置后相對當前路由跳轉，跳轉到子路由

this.router.navigate(['user', 1],{ queryParams: { id: 1 } }); 路由中傳參數 /user/1?id=1

this.router.navigate(['view', 1], { preserveQueryParams: true }); 默認值為false，設為true，保留之前路由中的查詢參數/user?id=1 to /view?id=1

this.router.navigate(['user', 1],{ fragment: 'top' }); 路由中錨點跳轉 /user/1#top

this.router.navigate(['/view'], { preserveFragment: true }); 默認值為false，設為true，保留之前路由中的錨點/user/1#top to /view#top

this.router.navigate(['/user',1], { skipLocationChange: true }); 默認值為false，設為true路由跳轉時瀏覽器中的url會保持不變，但是傳入的參數依然有效

this.router.navigate(['/user',1], { replaceUrl: true }); 未設置時默認為true，設置為false路由不會進行跳轉

2. 以 /路由/參數  動態路由的方式跳轉 -- snapshot方式

 路由配置：  { path: 'details/:id', component: bookDetailsComponent }

1. 指令跳轉傳參：

　　

　　<a [routerLink]="['/details', item.id]"</a>

2. js 跳轉：

　　

　　this.router.navigate(['/details', '1']

 

3. 獲取參數

this.route 是 ActivatedRoute 的實例

import { ActivatedRoute } from '@angular/router'

a. 快照方式獲取參數 snapshot

// 方式1

this.queryParams = this.route.snapshot.params['id']

// 方式2

this.route.params.subscribe(params=>{

　　this.queryParams = params

    console.log(this.queryParams)

})

b. queryParams 方式獲取參數

this.route.queryParams.subscribe(params=>{

　　this.queryParams = params['id']

    console.log(this.queryParams)

})

 

---

 

路由跳轉時遇到的問題：

　　1. 組件中有 [routerLink] 跳轉， 父元素有點擊事件。 點擊 routerLink 元素會觸發父元素事件 的問題？

　　　　解決： 在routerLink元素上添加 click 事件，組織事件冒泡。

　　　　代碼：

<ul style="display: flex;">

      <li *ngFor="let item of bookList" style="width: 300px; height: 320px; border: 1px solid #ddd;margin-left: 20px;"

      (click)="$event.stopPropagation();$event.preventDefault(); jumpDetial(item.id)">

         <div>{{ item.name }}</div>

         <div>{{ item.id }}</div>

         <a (click)="$event.stopPropagation()" [routerLink]="['/details', '1']" [queryParams]="{id: item.id}"  style="color:blue; font-size: 12px;cursor:pointer">查看詳情</a>

         <br>

         <a (click)="$event.stopPropagation()" [routerLink]="['./intro']"><i>簡介</i></a>

      </li>

   </ul>

　　 2. 事件跳轉時，如果該組件沒有子路由， [routerLink] = "home" 可以跳轉成功， 如果該組件有子路由 不加  " / " 則認為時跳轉到  "/父路由/home"

　　　所以，路由跳轉 [routerLink] = "/home" 表示一級路由  [rouerLink] = "./home" 表示二級路由

　　

　　3. 跳轉到子路由

　　

toChildPath(): void {

        // 方式1： 全路徑匹配

        this.router.navigate(['/book/intro'])

        // 方式2： 使用relativeTo. 其中 router 是Router的實例，this.route是 ActivatedRoute 的實例

        this.router.navigate(['intro'], {

            relativeTo: this.route

        })

    }

 

 

 

---

 

 選中路由高亮：

<li class="nav_item" [routerLink]="['/home']" routerLinkActive="active">首頁</li>

 routerLinkActive 屬性等於一個樣式類名