如果Angular Route Param未解析,则可以使用ActivatedRoute服务来访问路由参数。以下是使用ActivatedRoute解析参数的示例:
在路由模块中定义路由:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my.component';
const routes: Routes = [
{ path: 'my/:id', component: MyComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule {}
在组件中使用ActivatedRoute服务解析参数:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my',
template: `
Routing parameter value: {{ id }}
`
})
export class MyComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.id = +params.get('id');
});
}
}
在上面的示例中,ActivatedRoute服务用于访问路由参数,然后在ngOnInit()方法中将值设置为组件属性。最后,将组件属性绑定到模板中以显示参数值。
上一篇:AngularRouteLinkActive对于子组件无法正常工作
下一篇:Angularrouter.navigateiscausingthetargetcomponenttorendertwice