使用ng-bootstrap标签页结合<router-outlet>实现内部路由且切换不销毁内容可行吗？

First, let’s confirm your core requirements are achievable: you can absolutely use ng-bootstrap tabs with non-destroyed content alongside <router-outlet> for internal routing, and we can fix the URL mismatch problem you’re worried about. Let’s break this down step by step.

Step 1: Keep tab content alive #

By default, ng-bootstrap destroys inactive tab content to save resources. To prevent this, use the destroyOnHide input on each ngbTab and set it to false:

<ngb-tabset>
  <ngb-tab title="Tab 1" [destroyOnHide]="false">
    <ng-template ngbTabContent>
      <!-- Tab 1 content + internal router outlet -->
      <router-outlet name="tab1"></router-outlet>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Tab 2" [destroyOnHide]="false">
    <ng-template ngbTabContent>
      <!-- Tab 2 content + internal router outlet -->
      <router-outlet name="tab2"></router-outlet>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

This ensures the components inside each tab (including the router outlet) stay alive and retain their state when switching tabs.

Step 2: Fix URL mismatch with named router outlets #

The main issue you’re anticipating—URL conflicts when navigating across tabs—happens because the default router outlet only tracks one route at a time. The solution is to use named router outlets so each tab has its own independent route context.

Configure your routes #

Set up separate routes for each tab’s outlet:

const routes: Routes = [
  // Default redirect to Tab 1's initial route
  { path: '', redirectTo: '/(tab1:tab1/default)', pathMatch: 'full' },
  
  // Tab 1 sub-routes
  { 
    path: 'tab1', 
    outlet: 'tab1', 
    children: [
      { path: 'default', component: Tab1HomeComponent },
      { path: 'settings', component: Tab1SettingsComponent },
      { path: 'history', component: Tab1HistoryComponent }
    ]
  },
  
  // Tab 2 sub-routes
  { 
    path: 'tab2', 
    outlet: 'tab2', 
    children: [
      { path: 'default', component: Tab2HomeComponent },
      { path: 'details', component: Tab2DetailsComponent },
      { path: 'analytics', component: Tab2AnalyticsComponent }
    ]
  }
];

Navigate within tabs correctly #

When navigating inside a tab, specify the outlet name to target the correct router context:

// Navigate to Tab 1's settings page
this.router.navigate([{ outlets: { tab1: ['tab1', 'settings'] } }]);

// Navigate to Tab 2's analytics page
this.router.navigate([{ outlets: { tab2: ['tab2', 'analytics'] } }]);

Step 3: Sync tab selection with the URL (optional but recommended) #

To ensure switching tabs updates the URL correctly (and vice versa), sync the active tab state with the router:

export class TabsContainerComponent implements OnInit {
  activeTabId = 'tab1'; // Default active tab

  constructor(private router: Router) {}

  ngOnInit(): void {
    // Set initial active tab based on URL
    const activeOutlets = this.router.routerState.snapshot.root.children;
    if (activeOutlets.some(child => child.outlet === 'tab2')) {
      this.activeTabId = 'tab2';
    }
  }

  onTabChange(event: NgbTabChangeEvent): void {
    this.activeTabId = event.nextId;
    // Navigate to the tab's default route if it's not already in the URL
    if (!this.router.routerState.snapshot.root.children.some(child => child.outlet === event.nextId)) {
      this.router.navigate([{ outlets: { [event.nextId]: [event.nextId, 'default'] } }]);
    }
  }
}

Update your template to bind the active tab and listen for changes:

<ngb-tabset [(activeId)]="activeTabId" (tabChange)="onTabChange($event)">
  <ngb-tab id="tab1" title="Tab 1" [destroyOnHide]="false">
    <ng-template ngbTabContent>
      <router-outlet name="tab1"></router-outlet>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="tab2" title="Tab 2" [destroyOnHide]="false">
    <ng-template ngbTabContent>
      <router-outlet name="tab2"></router-outlet>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Alternative: Track routes per tab without named outlets #

If you prefer simpler URLs, you can use a service to track the last visited route for each tab. When switching tabs, navigate back to that route in the main outlet:

1. Create a route-tracking service:

@Injectable({ providedIn: 'root' })
export class TabRouteTracker {
  private lastRoutes = new Map<string, string>([
    ['tab1', '/tab1/default'],
    ['tab2', '/tab2/default']
  ]);

  saveLastRoute(tabId: string, route: string): void {
    this.lastRoutes.set(tabId, route);
  }

  getLastRoute(tabId: string): string {
    return this.lastRoutes.get(tabId) || '/';
  }
}

2. In each tab component, save the current route on change:

export class Tab1Component implements OnInit {
  constructor(private route: ActivatedRoute, private tracker: TabRouteTracker) {}

  ngOnInit(): void {
    this.route.url.subscribe(() => {
      const fullRoute = this.route.snapshot.pathFromRoot.map(r => r.url).join('/');
      this.tracker.saveLastRoute('tab1', fullRoute);
    });
  }
}

3. In your tabs container, navigate to the saved route when switching tabs:

onTabChange(event: NgbTabChangeEvent): void {
  const lastRoute = this.tracker.getLastRoute(event.nextId);
  this.router.navigateByUrl(lastRoute);
}

Key takeaways #

• destroyOnHide="false" is non-negotiable to preserve component state across tab switches.
• Named outlets are the most robust solution for keeping URLs in sync with all tab states (great if you want to share links to specific tab sub-pages).
• The route-tracking service is a simpler alternative if you don’t need complex URL structures.

Content of the question originates from Stack Exchange, question author Am Pa