Angular同级组件含router-outlet路由实现咨询

Absolutely! This is exactly what Angular's nested routing was built for—components like Feature D and E that have their own <router-outlet> to render child content are totally supported. Let's walk through how to set this up with concrete examples, based on your described scenario.

1. Assumed App Structure #

First, let's align on a typical project structure that matches your description (adjust component names as needed for your actual code):

src/
├── app/
│   ├── app.component.ts
│   ├── app-routing.module.ts
│   ├── feature-c/
│   │   ├── feature-c.component.ts
│   │   └── feature-c.component.html
│   ├── feature-d/
│   │   ├── feature-d.component.ts
│   │   ├── feature-d.component.html
│   │   └── feature-d-routing.module.ts
│   └── feature-e/
│       ├── feature-e.component.ts
│       ├── feature-e.component.html
│       └── feature-e-routing.module.ts

2. Root Routing Configuration (app-routing.module.ts) #

We'll define the top-level routes here, and set up lazy loading for Feature D and E (you can also use eager loading if preferred):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureCComponent } from './feature-c/feature-c.component';

const routes: Routes = [
  { path: 'feature-c', component: FeatureCComponent },
  // Route for Feature D (loads its nested routes)
  {
    path: 'feature-d',
    loadChildren: () => import('./feature-d/feature-d-routing.module').then(m => m.FeatureDRoutingModule)
  },
  // Route for Feature E (loads its nested routes)
  {
    path: 'feature-e',
    loadChildren: () => import('./feature-e/feature-e-routing.module').then(m => m.FeatureERoutingModule)
  },
  { path: '', redirectTo: '/feature-c', pathMatch: 'full' } // Default landing route
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. Nested Routing for Feature D/E #

Since Feature D and E have identical structures, their routing modules will be nearly identical (only component names change). Here's the config for feature-d-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureDComponent } from './feature-d.component';
// Assume D has child components (adjust to your actual child components)
import { DChild1Component } from './d-child1/d-child1.component';
import { DChild2Component } from './d-child2/d-child2.component';

const routes: Routes = [
  {
    path: '', // Matches the parent route "/feature-d"
    component: FeatureDComponent,
    children: [
      { path: 'child1', component: DChild1Component },
      { path: 'child2', component: DChild2Component },
      { path: '', redirectTo: 'child1', pathMatch: 'full' } // Default child route for D
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureDRoutingModule { }

For Feature E, copy this module, replace FeatureDComponent with FeatureEComponent, and update the child component references to match E's children.

4. Feature D/E Component HTML (Identical Structure) #

Both components will include navigation for their child routes and the nested <router-outlet>:

<!-- feature-d.component.html (feature-e.component.html is identical, just change the header text) -->
<div class="feature-wrapper">
  <h2>Feature D</h2>
  
  <!-- Navigation for child routes -->
  <div class="child-nav">
    <a routerLink="child1">View Child 1</a>
    <a routerLink="child2">View Child 2</a>
  </div>

  <!-- This outlet will render DChild1/DChild2 components -->
  <router-outlet></router-outlet>
</div>

5. RouterLink Usage Examples #

Navigating to Top-Level Features #

From your app's root component (or Feature C), link to Feature D/E using absolute paths:

<!-- app.component.html -->
<nav class="main-nav">
  <a routerLink="/feature-c">Go to Feature C</a>
  <a routerLink="/feature-d">Go to Feature D</a>
  <a routerLink="/feature-e">Go to Feature E</a>
</nav>

<!-- Root outlet for top-level components -->
<router-outlet></router-outlet>

Navigating to Child Routes Inside D/E #

As shown in the Feature D/E HTML above, use relative paths for child routes:

• routerLink="child1" resolves to /feature-d/child1 (when inside Feature D)
• routerLink="child2" resolves to /feature-d/child2

If you need to use absolute paths (less flexible but sometimes necessary), you can write:

<a routerLink="/feature-d/child1">Go to D's Child 1</a>

内容的提问来源于stack exchange，提问作者Marko Čepo