国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

@angular/router 源碼分析之注冊路由

hidogs / 1484人閱讀

摘要:模塊主要解決程序路由狀態改變和懶加載模塊問題。本文主要解釋程序啟動后,是如何注冊開發者定義的路由集合的,和實例化對象的。第六個重要的對象就是,提供了初始導航功能。

@angular/router 模塊主要解決程序路由狀態改變和懶加載模塊問題。

比如,程序從路由狀態 state1: /advisors/1/households/1 轉變為路由狀態 state2: /advisors/1/accounts/2,需要實例化的組件集合也從 components1: Advisor+Household 轉變為 components2: Advisor+Account(準確的說應該是先是 Module 的實例化,然后才是組件的實例化),這個過程是如何實現的?

另外,對于按需加載的模塊,又該如何加載該模塊,并且將該模塊顯示在對應位置處?

@angular/router 模塊就是用來解決路由狀態改變和懶加載模塊問題的。本文主要解釋程序啟動后,@angular/router 是如何注冊開發者定義的路由集合的,和實例化 Router 對象的。

程序啟動后,即調用 PlatformRef.bootstrapModule(AppModule) 后,會執行導入的 RouterModule.forRoot(routes: Routes) 來合并 RouterModule 提供的服務,且 routes 路由集合是由開發者自定義的,比如:

routes: Routes = [
    {path: "advisors/:id", component: AdvisorComponent, children: [
        {path: "households/:id", component: HouseholdComponent},
        {path: "accounts/:id", component: AccountComponent},
    ]},
];

一起看看 RouterModule 能給我們提供哪些重點對象吧:RouterModule.forRoot(routes)

第一個對象是來自于 @angular/common 的 Location,用來表示瀏覽器的 url,并提供了 forward(),back(),go() 等重要方法用來改變 url,同時提供了 HashLocationStrategyPathLocationStrategy 兩種策略生成是否帶有 "#" 的 url,至于為何需要兩種不同風格的 url 原因可以看 中文官網描述

第二個對象是序列化 URL 的對象 UrlSerializer,@angular/router 使用 UrlTree 對象存儲一個 URL,比如 "/advisors/1/accounts/2?type=loan#fragment",并且 UrlTree 對象又使用 UrlSegmentGroup 對象來表示 URL 的 path 部分,這里 UrlSegmentGroup 表示的就是 "/advisors/1/accounts/2" 這部分,UrlSegmentGroup 對象也可以存儲 "/advisors/1/accounts/2/(user/john//bank:abc)?type=loan#fragment" 這樣的多重 URL,該多重 URL 可以表示為兩個 URL: "/advisors/1/accounts/2/user/john?type=loan#fragment""/advisors/1/accounts/2/abc?type=loan#fragment"(該 URL 的出口 outlet 是 bank),雖然是多重 URL,但只需要用一個對象 UrlSegmentGroup 就可以存儲,而 UrlSegmentGroup 又使用 Segment 對象來表示當前 group 內的每一個 "/" 之間的部分。Url 的格式可見下圖:

對于上圖中的 URL,@angular/router 會調用 Router.parseUrl(), 實際上還是調用 UrlSerializer.parse() 來把 URL 字符串 "/section-one;test=one/(nav:navigation;test=two//main:about;test=three)?query=four#frag" 解析為 UrlTree 對象:

@angular/router 使用 UrlTree 對象來存儲 URL 字符串,并使用 UrlSerializer 來解析和序列化 URL。這塊知識點還是很重要的。

第三個對象 Router,也是 @angular/router 模塊中最重要的對象,使用 setupRouter 方法來初始化 Router,初始化邏輯主要是它的 構造函數,開發者自定義的 routes 集合 也是作為依賴來構造 Router 對象。第一個點就是首先調用 createEmptyUrlTree 方法創建一個 空的 UrlTree;第二個點就是實例化一個路由加載器 loader,當開發者定義了 route.loadChildren 屬性時,該 loader 就會使用 loader.load() 方法去異步加載模塊,所以該 loader 對象是用來解決懶加載問題的;第三個點是調用 createEmptyState 方法創建一個空 RouterState,RouterState 對象表示當前激活路由的狀態(RouterState is a tree of activated routes.),它也是一個樹形數據結構,用來存儲 當前激活路由 的數據,該樹的節點使用 ActivatedRoute 對象表示,比如對于上文中開發者定義的路由列表,當 URL 為 "/advisors/1/households/1" 時,這時 RouterState 對象表示的狀態樹,如下紅色顯示部分的子樹,而每一個包含組件的層級即是 ActivatedRoute

第四個點是調用 processNavigations() 執行路由狀態切換,實際上 @angular/router 的作用就是控制路由狀態的切換,所以 整個 @angular/router 的核心代碼就是 processNavigations() 方法。該方法訂閱了一個 BehaviorSubject 對象,只要該 BehaviorSubject 流對象彈射出一個新值,就會運行 executeScheduledNavigation(),不管是不是刷新 URL,都會運行 runNavigate(),所以精確的說,runNavigate() 這一百行左右代碼才是 @angular/router 包最最核心的代碼。這一百來行代碼具體分為幾個步驟:

1. Apply redirects(relative/absolute)

2. Construct router state by current URL(這段也就是第二篇文章將要探討的 查找路由 邏輯)

3. PreActivation: Run Guard3. PreActivation: Run Resolver

4. Activation: Activate Components(這段也就是第三篇文章將要探討的 運行路由 邏輯)

第四個重要的對象就是模塊工廠加載器 NgModuleFactoryLoader,該對象來自于 @angular/core 核心包,主要用來輔助 RouterConfigLoader 對象,懶加載模塊時可以異步加載遠程模塊。

第五個重要的對象就是提供了預加載對象 RouterPreloader,用來預加載所有懶加載模塊,從而提高性能。

第六個重要的對象就是 RouterInitializer,提供了初始導航功能。當程序首次初始化和啟動時,調用 RouterInitializer.appInitializer()RouterInitializer.bootstrapListener() 來進行初始化導航,最后還是調用 Router.initialNavigation() 來首次導航到 URL 對應的 RouterState

所以,@angular/router 首次初始化時,提供的最重要對象是 Router,其他一切對象和邏輯都是圍繞著 Router 對象展開。@angular/router 是如何根據當前 URL 查找到對應的 route 的呢?見本系列第二篇文章。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96511.html

相關文章

  • 源碼分析 @angular/cdk Portal

    摘要:這些依賴對象也進一步暴露了其設計思想。關鍵功能包括在上下文內掛載在上下文外掛載在上下文外共享數據。在構造必須依賴,所以可以直接創建嵌入視圖,然后手動強制執行變更檢測。提供了兩個指令和。 @angular/material 是 Angular 官方根據 Material Design 設計語言提供的 UI 庫,開發人員在開發 UI 庫時發現很多 UI 組件有著共同的邏輯,所以他們把這些共...

    BearyChat 評論0 收藏0
  • 利用angular4和nodejs-express構建一個簡單的網站(四)—angular路由初步

    摘要:為了做到這一點,我創建了一個服務提供商,通過的消息推送來實現。最后聲明一個來發送修改過的對象。根組件,創建它并插入宿主頁面。路由的作用是在找不到任何路由時,訪問組件。定義路由數組后,用裝飾器導入,并將路由數組傳遞給的數組。 上一篇文章對用戶發來的注冊和登錄信息進行了處理,并實現了將注冊用戶信息插入到mysql數據庫的數據表和從mysql數據庫的數據表中查詢到用戶的登錄信息并返回用戶認證...

    Zhuxy 評論0 收藏0
  • 利用angular4和nodejs-express構建一個簡單的網站(十)—好友模塊

    摘要:我們從這一章開始分析這個好友模塊。在中提供了和一個請求攔截器,分別用于提供數據服務路由守衛服務和攔截服務。在這個模塊下共有三個組件。路由路由模塊負責整個模塊的全部路由。和,對應同一個組件,當導航到路徑時,,的為具體的。 上一章講解了用戶登錄的相關代碼。用戶登錄成功后,就會進入好友模塊,在好友模塊中會根據不同的用戶ID顯示相應的好友列表,點擊好友列表中的單個好友就會進入編輯單個好友頁面,...

    BicycleWarrior 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<