在父组件中的路由配置中,需要通过path属性指定子组件的路由地址。同时,在子组件的路由配置中,需要通过path属性指定当前子组件的路由地址。确保这两个地址是正确匹配的。
示例路由配置:
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
}
];
如果存在多级子组件,需要在父子组件之间正确传递路由参数。在子组件中,使用ActivatedRoute对象获取路由参数。在父组件中,使用routerLink指令传递路由参数。
示例子组件代码:
export class ChildComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.id = +this.route.snapshot.paramMap.get('id');
}
}
示例父组件代码:
在父组件的模板中需要包含router-outlet指令,用于显示子组件。同时,在子组件的模板中也需要包含router-outlet指令,用于显示多级子组件。
示例父组件模板代码:
Parent Component
示例子组件模板代码:
Child Component
下一篇:Angular子组件破坏了表格