要在Angular 2中使用根路径路由的多个参数,可以按照以下步骤进行操作:
app.module.ts
文件中导入RouterModule
和Routes
:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
Routes
数组中,使用:
来指定参数的名称。例如,假设我们要传递两个参数param1
和param2
:const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home/:param1/:param2', component: HomeComponent }
];
ActivatedRoute
来获取参数的值。在组件的构造函数中注入ActivatedRoute
:import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
param1: string;
param2: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.param1 = params['param1'];
this.param2 = params['param2'];
});
}
}
Param 1: {{ param1 }}
Param 2: {{ param2 }}
这样,当你在浏览器中访问http://localhost:4200/home/value1/value2
时,你将会看到HomeComponent
显示的参数值分别为value1
和value2
。