要实现在Angular 7中导航到parent/:id/childroute/childroute,并从服务中调用数据,可以按照以下步骤进行操作。
首先,确保已经在项目中安装了Angular路由模块。可以通过以下命令进行安装:
npm install @angular/router
接下来,创建一个名为child.component.ts
的子组件,并在其中添加以下代码:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from 'your-data-service'; // 替换为你的数据服务
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
id: string;
data: any;
constructor(private route: ActivatedRoute, private dataService: DataService) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.id = params.get('id');
this.getData();
});
}
getData() {
this.dataService.getData(this.id).subscribe(data => {
this.data = data;
});
}
}
在上述代码中,我们使用ActivatedRoute
来获取URL中的参数,并通过getData()
方法从数据服务中获取数据。
然后,创建一个名为child.component.html
的HTML模板文件,并在其中显示数据:
Child Component
ID: {{id}}
Data: {{data}}
最后,在父组件的路由配置中,将子路由添加到parent/:id
路径下。例如,假设父组件的名称为parent.component.ts
,可以在其路由配置中添加以下代码:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{ path: 'parent/:id', component: ParentComponent, children: [
{ path: 'childroute/childroute', component: ChildComponent }
]},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述代码中,我们将子路由添加到父组件的路径parent/:id
下,并将其组件设置为ChildComponent
。
现在,当导航到parent/:id/childroute/childroute
时,Angular将加载ChildComponent
组件,并从数据服务中获取相应的数据。