角2-子模块路由和嵌套 < 路由器出口 >

小开

The html page will look like this.

Main Page

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Sub Module Page

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

on clicking navigation in top-nav bar the main route outlet will route respectively.

while clicking on sub-navbar the router-outlet [sub] will route respectively.

HTML is fine, the trick will came at writing app.routing

app.routing.ts

const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{ path: 'home',
component: homeComponent,
children: [
{
path: 'module1',
component: module1Component,
children: [
{
path: 'submodule11',
component: submodule11Component,
},
{
path: '',
redirectTo: 'submodule11',
pathMatch: 'full'
}
]
},
{
path: 'module2',
component: module2omponent,
children: [
{
path: 'submodule21',
component: submodule21Component,
},
{
path: '',
redirectTo: 'submodule21',
pathMatch: 'full'
}
]
}
]
},
{
path: 'about',
component: aboutComponent
}
]

Hope it will help you.

More details https://angular.io/guide/router

小开

you have to mention the outlet name in the routes mention your router outlet name in the routing like this "outlet:'sub"

routes: Routes = [
{path:'', redirectTo: 'login', pathMatch: 'full'},
{
path: 'login',
component: LoginComponent,


},
{ path: 'home',
component: AppComponent,
children: [
{path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
{path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
]
},
];

小开

Use:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Full example:

HTML

<div class="tabs tinyscroll">
<button *ngFor="let tab of tabs"
[routerLink]="[{ outlets: { sub: [tab.name] } }]"
routerLinkActive="selected">
<span>\{\{ tab.label }}</span>
</button>
</div>


<section>
<router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
RouterModule.forChild([
{
path: 'registers',
component: RegistersComponent,
children: [
{path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
{path: 'drivers', component: DriversComponent, outlet: 'sub'},
{path: 'bases', component: BasesComponent, outlet: 'sub'},
{path: 'lines', component: LinesComponent, outlet: 'sub'},
{path: 'users', component: UsersComponent, outlet: 'sub'},
{path: 'config', component: ConfigComponent, outlet: 'sub'},
{path: 'companies', component: CompaniesComponent, outlet: 'sub'}
],
canActivate: [AuthGuard]
}
]),
...

小开

This would work In Your Template.

<h2>First Component</h2>


<nav>
<ul>
<li><a routerLink="child-a">Child A</a></li>
<li><a routerLink="child-b">Child B</a></li>
</ul>
</nav>


<router-outlet></router-outlet>

In AppRoutingModule.

const routes: Routes = [
{
path: 'first-component',
component: FirstComponent, // this is the component with the <router-outlet> in the template
children: [
{
path: 'child-a', // child route path
component: ChildAComponent, // child route component that the router renders
},
{
path: 'child-b',
component: ChildBComponent, // another child route component that the router renders
},
],
},
];