下面是一个示例代码,演示如何使用 Angular ActivatedRoute 和 Angular Router:
首先,在 app.module.ts 文件中导入和配置 Angular Router 模块:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
// 定义路由规则
{ path: 'home', component: HomeComponent },
{ path: 'about/:id', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
然后,在 app.component.html 文件中添加路由链接和占位符:
接下来,在 AboutComponent 中使用 ActivatedRoute 来获取路由参数:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
template: `
About Page
Id: {{ id }}
`,
})
export class AboutComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
在上面的代码中,通过在构造函数中注入 ActivatedRoute 服务,然后在 ngOnInit 生命周期钩子中使用 route.params.subscribe() 方法来订阅路由参数的变化,并将参数赋值给 id 变量。
最后,启动应用程序,并点击导航链接来切换路由。在 About 页面中,会显示当前路由的参数。
这就是使用 Angular ActivatedRoute 和 Angular Router 的基本示例。