Angular 5 命名路由出口子组件路由问题求助

嘿，作为Angular 5新手搞路由确实得把基础步骤捋清楚，我结合你的场景给你一步步拆解：

第一步：准备组件与基础依赖 #

首先确保你已经创建好那三个需要路由管控的组件（我这里假设是HomeComponent、ProfileComponent、DashboardComponent，你可以直接替换成自己的组件名），然后在AppModule里导入路由相关模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

// 导入你的三个业务组件
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AppComponent } from './app.component';

第二步：定义路由规则 #

接下来要写路由配置数组，同时处理默认路由出口和你命名的mainContentOutlet：

const appRoutes: Routes = [
  // 默认路径：把Home组件加载到默认出口，同时指定命名出口的默认组件
  {
    path: '',
    component: HomeComponent,
    // 可选：默认出口的名称是primary，不写也生效
    outlet: 'primary',
    children: [
      {
        path: '',
        component: SidebarComponent, // 替换成你要放在命名出口的组件
        outlet: 'mainContentOutlet'
      }
    ]
  },
  // 访问/profile时的路由配置
  {
    path: 'profile',
    component: ProfileComponent,
    children: [
      {
        path: '',
        component: MainProfileContentComponent, // 对应命名出口的组件
        outlet: 'mainContentOutlet'
      }
    ]
  },
  // 访问/dashboard时的路由配置
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: '',
        component: MainDashboardContentComponent, // 对应命名出口的组件
        outlet: 'mainContentOutlet'
      }
    ]
  },
  // 404兜底路由，匹配所有未定义的路径
  { path: '**', redirectTo: '' }
];

第三步：在AppModule中注册路由 #

把刚才写的路由数组通过RouterModule.forRoot()注册到模块里，让Angular识别这些规则：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
    DashboardComponent,
    // 别忘了把命名出口用到的组件也声明进来
    SidebarComponent,
    MainProfileContentComponent,
    MainDashboardContentComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) // 注册路由规则
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第四步：完善AppComponent模板 #

你的模板已经有两个router-outlet了，我给你补全并加上测试用的路由链接：

<!-- 默认路由出口，加载主页面组件 -->
<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

<!-- 命名路由出口，对应配置里的mainContentOutlet -->
<div id="main-content" class="container-fluid">
  <router-outlet name="mainContentOutlet"></router-outlet>
</div>

<!-- 测试用的导航链接 -->
<div class="nav-bar">
  <a routerLink="/">首页</a>
  <!-- 跳转命名路由需要用对象形式指定每个出口的目标 -->
  <a [routerLink]="[{ outlets: { primary: 'profile', mainContentOutlet: 'mainContentOutlet' } }]">个人中心</a>
  <a [routerLink]="[{ outlets: { primary: 'dashboard', mainContentOutlet: 'mainContentOutlet' } }]">仪表盘</a>
</div>

关键小提示 #

• 命名路由出口必须在配置里通过outlet字段和模板的name属性对应上，不然会加载失败
• 跳转带命名出口的路由时，一定要用对象形式的routerLink，明确指定每个出口对应的路径
• Angular 5的路由核心逻辑和后续版本差异不大，新手先从同步加载组件入手，懒加载可以后续再研究

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