Angular10 路由传参

好久都没有用到路由传参了,突然用的时候居然有些模糊了,这次记录下

第一种

路由配置

export const GRAPH_ROUTE: Routes = [
    {
        path: 'search/:type/:value',
        component: XXXXXComponent,
    }]

html 路由

<button pButton type="button" label="Graph" [routerLink]="['/search/'+ type+'/'+value]" class="ui-button-rounded ui-button-warning" [style]="{marginLeft:'2rem'}"></button>

ts 路由

import { Router } from '@angular/router';
constructor(private router: Router) {}
this.router.navigate(['/search/'+this.type+'/'+this.value);

ts获取参数

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}

    this.route.params.subscribe(params => {
      const type = params['type'];
      const value = params['value'];
    });

url

http://localhost:9010/search/$type/$value

第二种

路由配置

export const GRAPH_ROUTE: Routes = [
    {
        path: 'search',
        component: XXXXXComponent,
    }]

ts路由

import { Router } from '@angular/router';
constructor(private router: Router ) { }
this.router.navigate(['/search'], { queryParams: { type:this.type,value:this.value }  });

ts获取参数

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}

    this.route.queryParams.subscribe(params => {
      const type = params['type'];
      const value = params['value'];
    });

url

http://localhost:9010/search?type=$type&value=$value