angular11源碼探索二十[路由ActivatedRoute]

ActivatedRoute

拿到路由的信息

interface ActivatedRoute {
  // 下面有介紹  
  snapshot: ActivatedRouteSnapshot 
  url: Observable<UrlSegment[]>
  params: Observable<Params>         	//動態參數
  queryParams: Observable<Params>  		//問號傳參
  fragment: Observable<string>          // #
  data: Observable<Data>			 // route裏面的data
  outlet: string					// 路由出口名稱
  component: Type<any> | string | null // 拿到當前組件
    
  //拿到當前的route信息  {path: "c/d", component: ƒ}  
  routeConfig: Route | null		
  //根route   AppComponent
  root: ActivatedRoute
  //父路由,感受這個挺有用的,拿到父路由的信息
  parent: ActivatedRoute | null
  //第一個子孩子  
  firstChild: ActivatedRoute | null
  //多個子孩子  
  children: ActivatedRoute[]
  //從路由器狀態樹的根到此路由的路徑的數組集合  
  pathFromRoot: ActivatedRoute[]
  // 動態id   ParamMap方法查找  
  paramMap: Observable<ParamMap>
  // 問號傳參  ParamMap方法查找  
  queryParamMap: Observable<ParamMap>
  toString(): string
}

toString

toString(): string {
    const url = this.url.map(segment => segment.toString()).join('/');
    const matched = this.routeConfig ? this.routeConfig.path : '';
    return `Route(url:'${url}', path:'${matched}')`;
  }+
// 例如 Route(url:'c;name=xxx/d;age=12', path:'c/d')

UrlSegment

'/team;id=33'
s[0].path   // team
s[0].parameters  // {id: 33}

當前的url路段

當前路由的參數,爲啥是[],由於當爲'a/b'爲拆成兩個數組
  UrlSegment[]
      path: string   
      // ;name=xxx
      parameters: {...}
      // 給parameters 封裝一些查詢的方法
      parameterMap
      //當前字段的url信息
      toString()
      //  serializePath(this);

帶s 就是整個字段鏈接起來
export function serializePaths(segment: UrlSegmentGroup): string {
  return segment.segments.map(p => serializePath(p)).join('/');
}
不帶`serializePath`就是當前的路段
例如: {path: 'c/d', component: CComponent}
	那麼就是這個最後的信息
    <a [routerLink]="['/home','a','c',{name:'xxx'},'d',{age:12}]" [queryParams]="{age:12}">aaa</a>
/home/a/c;name=xxx/d;age=12?age=12
 console.log(this.router.snapshot.url.toString());
// c;name=xxx,d;age=12
是url路段信息不會帶有其餘

案例

<a [routerLink]="['/home','a','c',{name:'xxx'},'d',{age:12}]">aaa</a>

{
      path: 'a', component: AComponent,children: [
        {path: 'c/d', component: CComponent}
      ]
    }

export class CComponent implements OnInit {
  constructor(private router:ActivatedRoute) { }
  ngOnInit(): void {
    console.log(this.router.snapshot.url);
      //  [UrlSegment, UrlSegment]
      // [
      // {parameters: {name: "xxx"},path: "c",parameterMap: ParamsAsMap}
	 // {parameters: {age: "12"}, path: "d",parameterMap: ParamsAsMap}	
	 // ]
      this.router.snapshot.url[0].parameterMap.keys // 列舉下面ParamsAsMap的用法
  }
}

ParamMap

export interface ParamMap {
 // 查詢是否有這個屬性
  has(name: string): boolean;
  /**
  根據屬性查詢值
  **/
  get(name: string): string|null;
  // 返回數組的屬性值  Array.isArray(v) ? v : [v];
  getAll(name: string): string[];
  //查詢全部的屬性名 Object.keys  
  readonly keys: string[];
}

ParamsAsMap

class ParamsAsMap implements ParamMap {
 private params: Params;
  constructor(params: Params) {
    this.params = params || {};
  }

  has(name: string): boolean {
    return Object.prototype.hasOwnProperty.call(this.params, name);
  }

  get(name: string): string|null {
    if (this.has(name)) {
      const v = this.params[name];
      return Array.isArray(v) ? v[0] : v;
    }

    return null;
  }

  getAll(name: string): string[] {
    if (this.has(name)) {
      const v = this.params[name];
      return Array.isArray(v) ? v : [v];
    }

    return [];
  }

  get keys(): string[] {
    return Object.keys(this.params);
  }
}

ActivatedRouteSnapshot

路線的信息,能夠用於遍歷怎麼路由器狀態樹,跟ActivatedRoute 相同,只是返回的類型不一樣

本質應該差很少,使用ActivatedRoute 的好處就是返回的是Observable 咱們使用pipe 使用特定的操做

interface ActivatedRouteSnapshot {
  routeConfig: Route | null
  url: UrlSegment[]
  params: Params
  queryParams: Params
  fragment: string
  data: Data
  outlet: string
  component: Type<any> | string | null
  root: ActivatedRouteSnapshot
  parent: ActivatedRouteSnapshot | null
  firstChild: ActivatedRouteSnapshot | null
  children: ActivatedRouteSnapshot[]
  pathFromRoot: ActivatedRouteSnapshot[]
  paramMap: ParamMap
  queryParamMap: ParamMap
  toString(): string
}

   constructor(private router: Router, private route: ActivatedRoute) {
        this.route.snapshot.toString();
        // 拿到問號傳參
        this.route.snapshot.queryParams
		// 問好傳參  map格式,能夠經過 get('') 進行查詢須要的值
        this.route.snapshot.queryParamMap
   }

案例

激活的路由

// {path: 'b/:id#name', component: BComponent,data:{name:'xxx'}},
export class BComponent implements OnInit {

  constructor(private route:ActivatedRoute) {
      // 拿到當前節點路由
    console.log(route.snapshot.url.join(''));
      // b, 若是原本是/a/b,也是拿到的當前樹的節點
      // 拿到綁定的數據
    console.log(route.snapshot.data);
      // {name: "xxx"} 
      // 查詢動態路由的參數,3種方法
      console.log(this.route.snapshot.paramMap.get('id'));
	  console.log(this.route.snapshot.params['id']); 
      this.route.params.subscribe(val=>{
          console.log(val.id);
        })	
      // 
          console.log(this.route.snapshot.fragment);
		// name
  }

  ngOnInit(): void {
  }

}

參數查詢的問題

constructor( private route: ActivatedRoute) {
      console.log(this.route.snapshot.queryParams);   
 }
?a=&b=
//  {a: '', b: ''}
?a=foo&a=bar&a=swaz
// {a: ['foo', 'bar', 'swaz']}
.queryParamMap.get('a')
// 查詢的是第一個  foo
.queryParamMap.getAll('a')
// ['foo', 'bar', 'swaz']

/one/(two//left:three//right:four)
/one/(left:three//right:four)
  {
    path: 'one', component: OneComponent,  // 三個路由接口寫在這裏
    children: [
      {path: '', component: FourComponent},
      {path: 'two', component: TwoComponent },
      {path: 'three', outlet: 'left', component: EComponent},
      {path: 'four', outlet: 'right', component: FourComponent},
    ],
  },