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},
    ],
  },