在Angular路由器中,可以使用路由参数来传递数据。对于多个参数,可以将它们作为变量传递。
下面是一个示例,演示如何在Angular路由器中传递多个参数作为变量:
const routes: Routes = [
{ path: 'example/:param1/:param2', component: ExampleComponent }
];
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent 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 }}
这样,在访问example/abc/123
时,param1
的值将为abc
,param2
的值将为123
。
请注意,要在模板中使用路由参数的值,必须等到路由参数被解析后才能获取到。因此,最好将获取参数的代码放在ngOnInit
生命周期钩子函数中。