在AngularJS 2中使用ID嵌套子路由可以通过以下步骤实现:
RouterModule.forRoot()
方法来定义父路由。{ path: 'detail/:id', component: DetailComponent }
。<router-outlet></router-outlet>
标签来显示子路由的内容。ActivatedRoute
服务来获取路由参数的值。ActivatedRoute
服务,并使用snapshot
属性来获取路由参数的值。例如,可以使用this.route.snapshot.params['id']
来获取ID参数的值。以下是一个示例代码:
父路由定义(app-routing.module.ts):
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
importimport { DetailComponent } from './detail.component';
const routes: Routes = [
{ path: 'detail/:id', component: DetailComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
父组件模板(app.component.html):
<router-outlet></router-outlet>
子组件(detail.component.ts):
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.id = this.route.snapshot.params['id'];
// 根据ID参数进行相应的数据处理和页面展示
}
}
子组件模板(detail.component.html):
<h2>详情页面</h2>
<p>当前ID:{{ id }}</p>
这样,当访问/detail/123
时,就会加载DetailComponent
组件,并在页面中显示当前ID为123的详情信息。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云