在Angular中,使用子路由进行导航时可能会遇到一些问题。以下是一个解决这些问题的示例:
// 父组件
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {}
// 子组件1
@Component({
selector: 'app-child1',
template: `Child 1 Component
`
})
export class Child1Component {}
// 子组件2
@Component({
selector: 'app-child2',
template: `Child 2 Component
`
})
export class Child2Component {}
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]
}
];
routerLink
进行导航:Go to Parent
这样就可以通过点击链接来导航到父组件,并在父组件中显示子组件。
注意:在使用子路由时,必须在父组件的模板中使用
来指定子组件的加载位置。