要实现Angular子路由重新加载父组件,可以使用 ActivatedRoute
的 paramMap
属性来监听子路由参数的变化,然后在父组件中重新加载数据或执行其他操作。
以下是一个示例代码:
在父组件中,使用 ActivatedRoute
来监听子路由参数的变化,并在参数变化时重新加载数据:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Component({
selector: 'app-parent',
template: `
Parent Component
Current child route parameter: {{ childParam }}
`,
})
export class ParentComponent implements OnInit {
childParam: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.paramMap.subscribe((params: ParamMap) => {
this.childParam = params.get('childParam');
// 在这里可以重新加载数据或执行其他操作
});
}
}
在路由模块中,定义父子路由,并使用 component: ParentComponent
来指定父组件:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child/:childParam',
component: ChildComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
在子组件中,可以使用如下代码来导航到子路由并传递参数:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-child',
template: `
Child Component
`,
})
export class ChildComponent {
constructor(private router: Router) {}
navigateToParent() {
const childParam = 'someParamValue';
this.router.navigate(['/parent/child', childParam]);
}
}
这样当子路由参数发生变化时,父组件的 ngOnInit
方法会被触发,从而实现重新加载父组件的效果。