常用類

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

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

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

類之間的關(guān)系

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

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

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

ActivatedRouteSnapshot 和 RouterStateSnapshot

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

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

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

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

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

這些快照類的作用是為了保留路由狀態(tài)的靜態(tài)副本，以便在路由導(dǎo)航期間進(jìn)行檢查和比較。你可以使用它們來執(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論