前面给大家介绍了angular路由跳转，这次说一说angular路由传参，两种具体如下：

1，查询方式传参

<a href="" routerLink="/about" [queryParams]='{"nihao":"d dod f"}'>关于我们</a>

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

@Component({

  selector: 'app-about',

  templateUrl: './about.component.html',

  styleUrls: ['./about.component.css']

})

export class AboutComponent implements OnInit {

  constructor(private route:ActivatedRoute) { }

  ngOnInit(): void {

    debugger

    this.route.queryParamMap.subscribe(function(query){

      debugger

      console.log(query)

      console.log(query.get("nihao"))

    })

  }

}

2，动态方式传参

import { NgModule } from '@angular/core';

import { RouterModule, Routes, UrlSegment } from '@angular/router';

import { AboutComponent } from './page/about/about.component';

import { HomeComponent } from './page/home/home.component';

const routes: Routes = [

  { path: 'home/:name/:age', component: HomeComponent },

  { path: 'about', component: AboutComponent },

  //pathMatch表示完全匹配，其中

  { path: '', redirectTo:"/about",pathMatch:"full" },

];

@NgModule({

  //RouterModule.forRoot()启动路由

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

<a href="" [routerLink]="['/home','zhangdan']">首页</a> &ngsp;

    以上便是关于angular路由传参的两种方法，更多内容干货可关注慕课网~