Angular4项目中多<router-outlet>使用及路由跳转异常问题咨询

Hey there! Let's tackle your Angular 4 multi-router-outlet setup and fix that weird URL glitch you're seeing. I'll break this down into two clear parts: getting the named outlet working for /docs, and resolving the malformed URL issue.

First, let's set up your app.component.html and app.routing.ts to render WelcomeComponent in the named welcome outlet when accessing /docs, while other routes use the default outlet.

app.component.html #

Add both the default and named router outlets to your template:

<!-- Default outlet for most routes -->
<router-outlet></router-outlet>

<!-- Named outlet specifically for WelcomeComponent -->
<router-outlet name="welcome"></router-outlet>

app.routing.ts #

Update your route configuration to specify the outlet for the /docs route, plus your other routes (like /abcd):

import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { AbcdComponent } from './abcd/abcd.component';
// Import any other components you need for routes

const appRoutes: Routes = [
  // Route for /abcd (loads into default outlet)
  { path: 'abcd', component: AbcdComponent },
  // Route for /docs (explicitly loads into the "welcome" named outlet)
  { 
    path: 'docs', 
    outlet: 'welcome',
    component: WelcomeComponent 
  },
  // Default redirect to /abcd to match your initial load URL
  { path: '', redirectTo: '/abcd', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(appRoutes);

This setup ensures when you navigate to /docs, WelcomeComponent renders in the welcome outlet, while routes like /abcd use the default outlet as expected.

The weird URL (localhost:4200/#/abcd(welc...) happens because you're not navigating to the named route correctly. Angular uses a specific syntax for named outlets in URLs (/primary-route(outlet-name:route-path)), and incorrect navigation code leads to partial/malformed paths.

What You're Probably Doing Wrong #

If your current changeRoute() looks like this, it's the source of the issue:

// ❌ Incorrect - causes malformed URL
changeRoute() {
  this.router.navigate(['/', { outlets: { welcome: 'docs' } }]);
}

Or if your template has a routerLink like this:

<!-- ❌ Incorrect routerLink -->
<a [routerLink]="['/', { outlets: { welcome: 'docs' } }]" (click)="changeRoute()">Go to Docs</a>

The Correct Navigation Approach #

To keep the /abcd route active in the default outlet while loading /docs into the welcome outlet, use one of these methods:

Option 1: Component-level Navigation (with router.navigate)

Inject both Router and ActivatedRoute into your component, then navigate relative to the current route:

import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

changeRoute() {
  // ✅ Correct - loads /docs into "welcome" outlet while keeping /abcd active
  this.router.navigate(
    [{ outlets: { welcome: 'docs' } }],
    { relativeTo: this.route }
  );
}

Alternatively, you can explicitly specify the primary route if you want to jump to /abcd + the named outlet directly:

this.router.navigate(['/abcd', { outlets: { welcome: 'docs' } }]);

Option 2: Template-level RouterLink

If you prefer using routerLink in your template (you can even remove the (click) handler if you use this):

<!-- ✅ Correct routerLink to load /docs into welcome outlet -->
<a [routerLink]="[{ outlets: { welcome: 'docs' } }]">Go to Docs</a>
<!-- Or explicitly specify the primary route -->
<a [routerLink]="['/abcd', { outlets: { welcome: 'docs' } }]">Go to Docs</a>

Bonus: Clearing the Named Outlet #

If you ever need to remove WelcomeComponent from the welcome outlet (e.g., close the docs view), navigate with null for the outlet:

this.router.navigate(
  [{ outlets: { welcome: null } }],
  { relativeTo: this.route }
);

内容的提问来源于stack exchange，提问作者Arp