常用類

Angular Router模塊提供了幾個(gè)重要的類來(lái)處理路由信息。以下是一些常用的類：

• Router：Router是Angular Router模塊中最重要的類之一。它提供了導(dǎo)航和路由操作的方法，用于在應(yīng)用程序中執(zhí)行導(dǎo)航到不同路由的操作。你可以使用navigate方法來(lái)導(dǎo)航到指定的路由，使用navigateByUrl方法根據(jù)URL字符串進(jìn)行導(dǎo)航，以及使用其他方法來(lái)處理路由事件和訪問(wèn)當(dāng)前的路由狀態(tài)。
• ActivatedRoute：ActivatedRoute代表當(dāng)前激活的路由，它提供了對(duì)當(dāng)前路由信息的訪問(wèn)。通過(guò)注入ActivatedRoute服務(wù)，你可以獲取當(dāng)前路由的參數(shù)、查詢參數(shù)、URL路徑等信息。你還可以通過(guò)params屬性和queryParams屬性來(lái)訂閱參數(shù)和查詢參數(shù)的變化。
• RouterState和RouterStateSnapshot：RouterState表示整個(gè)應(yīng)用程序的路由狀態(tài)，是一個(gè)樹狀結(jié)構(gòu)，包含了所有活動(dòng)的路由。它提供了對(duì)整體路由狀態(tài)的訪問(wèn)和導(dǎo)航的方法。RouterStateSnapshot是RouterState的快照，表示在特定時(shí)間點(diǎn)應(yīng)用程序的路由狀態(tài)。你可以通過(guò)注入RouterState或RouterStateSnapshot服務(wù)來(lái)訪問(wèn)當(dāng)前的路由狀態(tài)。
• UrlTree：UrlTree是一個(gè)樹狀數(shù)據(jù)結(jié)構(gòu)，用于處理和操作URL。它提供了一些方法，例如parseUrl用于解析URL字符串，serializeUrl用于將URL樹序列化為字符串，以及其他方法用于處理URL的各個(gè)部分。
• ActivatedRouteSnapshot和RouteSnapshot：ActivatedRouteSnapshot是ActivatedRoute的快照，表示在特定時(shí)間點(diǎn)激活的路由狀態(tài)的快照。它是不可變的，并提供了訪問(wèn)路由信息的方法。RouteSnapshot是Route的快照，表示在特定時(shí)間點(diǎn)定義的路由配置的快照。它提供了對(duì)路由配置信息的訪問(wèn)，例如路由路徑、路由參數(shù)、路由守衛(wèi)等。

這些類是Angular Router模塊中的核心類，用于處理和操作路由信息。通過(guò)使用它們，你可以實(shí)現(xiàn)導(dǎo)航、訪問(wèn)路由狀態(tài)、處理參數(shù)和查詢參數(shù)等功能，從而構(gòu)建靈活和強(qiáng)大的路由功能。

類之間的關(guān)系

ActivatedRoute RouterState UrlTree 這三個(gè)類之間的關(guān)系：

• 當(dāng)用戶導(dǎo)航到某個(gè)路由時(shí)，ActivatedRoute會(huì)被更新為當(dāng)前激活的路由信息。你可以通過(guò)注入ActivatedRoute服務(wù)來(lái)獲取當(dāng)前路由的信息，例如路由參數(shù)和查詢參數(shù)。
• RouterState是一個(gè)樹狀結(jié)構(gòu)，代表整個(gè)應(yīng)用程序的路由狀態(tài)。它包含了所有活動(dòng)路由的快照，其中每個(gè)節(jié)點(diǎn)都是一個(gè)ActivatedRoute實(shí)例。你可以通過(guò)注入Router服務(wù)來(lái)獲取當(dāng)前的路由狀態(tài)，以及對(duì)其進(jìn)行導(dǎo)航和操作。
• UrlTree用于處理和解析URL，并提供了一些方法來(lái)操作URL。Router服務(wù)使用UrlTree來(lái)處理導(dǎo)航請(qǐng)求，將其與路由配置進(jìn)行匹配，并最終更新RouterState和ActivatedRoute。

ActivatedRoute用于表示當(dāng)前激活的路由，RouterState代表整個(gè)應(yīng)用程序的路由狀態(tài)，而UrlTree用于處理和解析URL。它們之間密切相關(guān)，并在Angular的路由系統(tǒng)中發(fā)揮著重要的作用。

ActivatedRouteSnapshot 和 RouterStateSnapshot

除了ActivatedRoute和RouterState，還有兩個(gè)相關(guān)的類：ActivatedRouteSnapshot和RouterStateSnapshot。

ActivatedRouteSnapshot是ActivatedRoute的快照，它表示在特定時(shí)間點(diǎn)激活的路由狀態(tài)。它包含了與該路由關(guān)聯(lián)的所有信息，例如路由參數(shù)、查詢參數(shù)、路由路徑等。ActivatedRouteSnapshot是一個(gè)不可變對(duì)象，可以用于查看和檢查特定路由的狀態(tài)信息，但不能對(duì)其進(jìn)行修改。

RouterStateSnapshot是RouterState的快照，表示在特定時(shí)間點(diǎn)應(yīng)用程序的路由狀態(tài)。它是一個(gè)樹狀結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都是一個(gè)ActivatedRouteSnapshot實(shí)例，代表一個(gè)活動(dòng)的路由快照。與RouterState類似，RouterStateSnapshot也是不可變的，可以用于查看應(yīng)用程序的路由狀態(tài)，但不能對(duì)其進(jìn)行修改。

這兩個(gè)快照類在路由導(dǎo)航期間起著重要作用：

• ActivatedRouteSnapshot用于在路由導(dǎo)航期間獲取當(dāng)前激活的路由狀態(tài)的快照。它可以通過(guò)注入ActivatedRouteSnapshot服務(wù)來(lái)訪問(wèn)。
• RouterStateSnapshot用于獲取應(yīng)用程序的整體路由狀態(tài)的快照，包括所有活動(dòng)路由的快照。它可以通過(guò)注入RouterStateSnapshot服務(wù)來(lái)訪問(wèn)。

這些快照類的作用是為了保留路由狀態(tài)的靜態(tài)副本，以便在路由導(dǎo)航期間進(jìn)行檢查和比較。你可以使用它們來(lái)執(zhí)行一些路由守衛(wèi)操作，例如在導(dǎo)航發(fā)生之前獲取當(dāng)前路由狀態(tài)的快照、比較當(dāng)前路由狀態(tài)與之前的狀態(tài)之間的差異等。

使用示例

import { ActivatedRoute, Router, RouterState, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
@Component({...})
export class MyComponent {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
  ) {}
  ngOnInit() {
    // 使用 ActivatedRoute 和 ActivatedRouteSnapshot 獲取當(dāng)前路由參數(shù)
    this.route.params.subscribe(params => {
      console.log(params); // 輸出當(dāng)前路由參數(shù)
    });
    const currentActivatedRouteSnapshot: ActivatedRouteSnapshot = this.route.snapshot;
    console.log(currentActivatedRouteSnapshot.params); // 輸出當(dāng)前激活路由的參數(shù)
    // 使用 Router 和 RouterState 進(jìn)行導(dǎo)航和操作路由狀態(tài)
    this.router.navigate(['/new-route']); // 導(dǎo)航到新的路由
    const currentState: RouterState = this.router.routerState;
    console.log(currentState); // 輸出當(dāng)前路由狀態(tài)
    const routerStateSnapshot: RouterStateSnapshot = currentState.snapshot;
    console.log(routerStateSnapshot); // 輸出整體路由狀態(tài)的快照
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log(route.params); // 檢查特定路由的參數(shù)
    console.log(state.url); // 檢查當(dāng)前URL
    return true;
  }
}

到此這篇關(guān)于Angular中Router的常用類分享的文章就介紹到這了,更多相關(guān)Angular Router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論