angular11源碼探索二十三[路由forRoot]

forRoot

rotRoot: 靜態方法是配置根路由模塊爲您的應用程序的方法。調用時RouterModule.forRoot(routes)，要求AngularRouter全局實例化該類的實例,Angular建立一個新的基礎AppModule來導入全部功能模塊同樣，它也提供了AppRoutingModule導入全部子路徑的功能。該forRoot方法實際上已經在中使用了app-routing.module.ts。在您的應用中，您只想使用forRoot一次該方法。這是由於此方法告訴Angular在後臺實例化該類的實例Router，而且您的應用程序中只能有一個路由器,若是您--routing在建立應用程序時使用參數，則無需擔憂使用該forRoot方法，由於它已經爲您設置好了

app-routing.module.ts

imports: [RouterModule.forRoot(routes)],
forRoot(routes: Routes, config?: ExtraOptions)

源碼位置

這邊咱們主要探究第二個參數

ExtraOptions

interface ExtraOptions {
    // 當爲true時，將全部內部導航事件記錄到控制檯。
    // 用於調試導航的事件
  enableTracing?: boolean
  // 當爲true時，啓用使用URL片斷的#  就是哈希路由
  useHash?: boolean
  // type InitialNavigation = 'disabled'|'enabled'|'enabledBlocking'|'enabledNonBlocking';  
  // 默認  enabledNonBlocking 在建立根組件以後開始初始導航。初始導航完成後，引導程序不會被阻止
 // 'enabledBlocking'-初始導航在建立根組件以前開始。引導程序將被阻止，直到完成初始導航爲止。該值是服務器端渲染正常工做所必需的。 
    // 'disabled'-不執行初始導航。在建立根組件以前設置位置偵聽器。若是因爲某種複雜的初始化邏輯，有理由對路由器什麼時候開始其初始導航有更多的控制權，請使用。
    // 'enabled' angular 11不推薦使用
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  // 預加載策略  
  preloadingStrategy?: any
   // 定義路由器在收到對當前URL的導航請求時應採起的措施
   //  ignore  默認  這將致使路由器忽略導航
   // reload   使用此選項來配置導航到當前URL時的行爲,
    // 思考了好久,'reload'並不會真正的執行加載工做，它只是從新觸發了路由上的events事件循環。
    // 這個用意不是很明顯, 我發現默認狀況下也會觸發路由事件,暫時先放放吧
  onSameUrlNavigation?: 'reload' | 'ignore'
   // 配置向後導航時是否須要恢復滾動位置 
   // 'disabled'-（默認）不執行任何操做。滾動位置在導航上保持不變。
  // 'top'-在全部導航上將滾動位置設置爲x = 0，y = 0。
 // 'enabled'-在向後導航時恢復上一個滾動位置，若是提供了導航，則將位置設置爲錨點，或者將滾動位置設置爲[0，0]（正向導航）。此選項將在未來成爲默認選項。
    //我在angular9學習第5篇講過
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  // 是否滾動到該元素  (錨定滾動)
   //'disabled' -不執行任何操做（默認）。
  // 'enabled'-滾動到元素。此選項將在未來成爲默認選項。 
  anchorScrolling?: 'disabled' | 'enabled'
    // 配置路由器滾動到某個元素時將使用的滾動偏移量。當給定具備x和y位置值的元組時，路由器每次滾動時都會使用該偏移量。給定功能後，路由器每次恢復滾動位置時都會調用該功能。
  scrollOffset?: [number, number] | (() => [number, number])
  // 定義路由器如何將參數，數據和已解析的數據從父路由合併到子路由
    // 默認狀況下（「 emptyOnly」），僅繼承無路徑或無組件路由的父參數
    // 設置爲「 always」始終啓用父參數的無條件繼承。
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
    //錯誤處理...這個稍等
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  // 定義路由器什麼時候更新瀏覽器URL
  // 默認 deferred  在成功導航後進行更新。若是但願在導航開始時更新URL
  // eager  儘早更新URL，能夠經過顯示帶有失敗URL的錯誤消息來處理導航失敗
  urlUpdateStrategy?: 'deferred' | 'eager'
    // 這是原本有個bug,而後修復了,因此設置成了 'corrected'
    // 啓用錯誤修復程序，以更正具備空路徑的組件中的相對路徑
    // https://github.com/angular/angular/issues/19290
    // 相對導航到被空/無組件路線折斷的兄弟姐妹
  relativeLinkResolution?: 'legacy' | 'corrected'
}
文檔網址
https://angular.io/api/router/ExtraOptions

onSameUrlNavigation

'reload'並不會真正的執行加載工做，它只是從新觸發了路由上的events事件循環。
當咱們設置了 reload 的時候
在頁面上使用,咱們發現當在當前路由的時候,點擊當前路由的導航不會觸發事件
  this.router.events.pipe(
      filter(v=>v instanceof NavigationEnd)
    ).subscribe(
      res=>console.log(res);
    )
可是當咱們點擊其餘路由都會觸發當前路由的事件,我想它的用意就是這個
若是咱們原本在當前路由,點擊當前路由的時候想觸發事件的話
那咱們須要作的是: 修改防禦路由的策略,使其每次點擊都會觸發,路由守衛

這個跟路由守衛沒有關聯,試了只會當前進來的時候出發一次

anchorScrolling

錨點滾動

設置
anchorScrolling:enabled
這個社會了就至關於能夠在網址上面設置 #add執行錨點,啓動描點定位

下面這種方法好像直接能夠執行不須要設置
<h1 id="add">add</h1>
<button (click)="clickMethod('add')">++</button>

export class TwoComponent implements OnInit, AfterViewInit, OnChanges {
 constructor(
              private viewPort:ViewportScroller,
  ) {}
  
   clickMethod(str: string) {
    this.viewPort.scrollToAnchor(str)
  } 
}    
添加平滑效果
html{
  scroll-behavior: smooth;
}

paramsInheritanceStrategy

上案例

paramsInheritanceStrategy : 'always'
啓用父參數的無條件繼承。

	{
        path: 'a', component: AComponent, children: [
          {path:'user',component:CComponent}
        ]
      },
  A.html中
<a routerLink="user">11111</a><br>
<a [routerLink]="['user']">122222</a>
當前路由在`/a`上, 兩種方式都會跳到  `a/user`
若是不想繼承能夠寫絕對定位

relativeLinkResolution

https://angular.io/api/router/ExtraOptions#relativeLinkResolution

const routes = [
  {
    path: '',
    component: ContainerComponent,
    children: [
      { path: 'a', component: AComponent },
      { path: 'b', component: BComponent },
    ]
  }
];
從中ContainerComponent，這將不起做用：

<a [routerLink]="['./a']">Link to A</a>

可是，這將起做用：

<a [routerLink]="['../a']">Link to A</a>

換句話說，您須要使用../而不是./。

v11中的默認值爲corrected。

forChild

forChild: 當您使用forChild靜態方法時,Router應用程序中已有一個實例，所以請向該實例註冊全部這些路由

注意forChild上面方法的使用。因爲您已經使用了該forRoot方法，所以只想註冊到已實例化的應用路由器的路由

preloadingStrategy

預加載策略

• NoPreloading-不預加載任何模塊，這是默認行爲

• PreloadAllModules-全部模塊都儘量快地預加載

  參考angular9 的學習九

  它的目標就是,若是咱們不少模塊都是懶加載,可是其中有些須要預先加載,能夠這樣使用

ViewportScroller

源碼angular-master/packages/common/src/viewport_scroller.ts

定義滾動位置管理器

在angular9學習八也寫到過

abstract class ViewportScroller {
    // 配置滾動到錨點時使用的頂部偏移量。
  abstract setOffset(offset: [number, number] | (() => [number, number])): void
   // 檢索當前滾動位置。 
  abstract getScrollPosition(): [number, number]
// 滾動到指定位置。
  abstract scrollToPosition(position: [number, number]): void
  // 滾動到錨點元素。
  abstract scrollToAnchor(anchor: string): void
  // 禁用瀏覽器提供的自動滾動恢復
  abstract setHistoryScrollRestoration(scrollRestoration: "auto" | "manual"): void
}

setOffset()

配置滾動到錨點時使用的頂部偏移量。

[x,y]
   clickMethod() {
    this.viewport.setOffset([0,1000])
    this.viewport.scrollToAnchor('ddd')
  }