在Angular 6中,可以使用命名出口和嵌套路由来组织和管理组件。以下是一个示例解决方法,包含了代码示例:
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',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent, outlet: 'childOutlet' }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Parent Component
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
constructor(private router: Router) { }
navigateToChild() {
this.router.navigate([{ outlets: { childOutlet: ['child'] } }]);
}
}
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() {
this.router.navigate([{ outlets: { childOutlet: null } }]);
}
}
以上示例展示了如何在Angular 6中使用命名出口和嵌套路由。父组件中的模板定义了两个命名出口,用于承载父组件和子组件。在父组件的控制器中,可以通过调用navigate
方法来导航到子组件。同样,在子组件的控制器中,可以通过调用navigate
方法来导航回父组件。