Angular 路由传参的两种方式

定义路由

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component/:id', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

一 通过queryParams传递

---

app.component.html

<a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page" [queryParams]="{age:'11',name:'test'}">Second Component</a>
<router-outlet></router-outlet>

使用[queryParams]绑定要传递的参数(适用于传递json对象) 也可以绑定后台定义的某些对象

点击链接跳转后 地址栏中显示的URL格式为:RoutingApphttp://localhost:4200/second-component?age=11&name=test

---

second.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {

    constructor(private _activatedRoute:ActivatedRoute){
    }
  ngOnInit(): void {
    // 静态获取 只能获取初始化的参数
    const param = this._activatedRoute.snapshot.queryParams;
    console.log(param,'param');

    // 自动获取 只要路由中的参数发生变化 就能检测到 订阅的方式进行获取的
    this._activatedRoute.queryParams.subscribe(x=>{
      console.log(x,'xxxxx')
    })
  }
}

二 通过params传递

app.component.html

<a routerLink="/first-component/1" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a>
<router-outlet></router-outlet>

要使用该方式传参 路由path需要额外设置参数 详见定义路由 同样也可以绑定后台定义的某些对象 (PS:如果使用该方式传递参数不在路由中做对应设置 点击链接后会报错)

点击链接跳转后 地址栏中显示的URL格式为:

RoutingApphttp://localhost:4200/first-component/1

first.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  constructor(private _activatedRoute:ActivatedRoute){}

  ngOnInit(): void {
    const param = this._activatedRoute.snapshot.params;
    console.log(param,'param');

    this._activatedRoute.params.subscribe(x=>{
      console.log(x)
    })
  }

}