Angular 5 儿童路由器插座不起作用答案

【问题标题】：Angular 5 router outlet for child doesn't workAngular 5 儿童路由器插座不起作用
【发布时间】：2019-03-27 21:11:52
【问题描述】：

我正在处理 Angular 项目，但我无法为子路线添加“出口”。这些是主模块已经调用的路由参数，但我不知道为什么它不起作用。

这是主要路线

const routes: Routes = [
            {path: '', component: ContainerComponent},
            {path: 'search', component: SearchComponent},
            {path: 'sign-in',  loadChildren: './../signIn_Module/sign-in.module#SignInModule'},
            {path: 'sign-up', loadChildren: './../signUp_Module/sign-up.module#SignUpModule'},
            {path: 'home', loadChildren: './../home_Module/home.module#HomeModule'},
            {path: 'user', loadChildren: './../profile_Module/profile.module#ProfileModule'},
            {path: 'training', loadChildren: './../Training_Module/training.module#TrainingModule'},

            {path: '**', redirectTo: '', pathMatch: 'full'}
];

这是包含问题的路由

const trainingRoutes: Routes = [
  {path: '', component: TrainingComponent, children: [
     {path: 'title', component: TitleComponent, outlet: 'training_content'},
     {path: 'image', component: ImageComponent, outlet: 'training_content'},
     {path: 'description', component: DescriptionComponent, outlet: 'training_content'},
     {path: 'file', component: FileComponent, outlet: 'training_content'},
     {path: 'requirement', component: RequirementComponent, outlet: 'training_content'},
     {path: 'details', component: DetailsComponent, outlet: 'training_content'},
     {path: '**', redirectTo: 'title', pathMatch: 'full'}
  ]},
  {path: '**', redirectTo: '', pathMatch: 'full'}
];

【问题讨论】：

什么不行，是不是路由器链接改变了路径，不显示内容？
如果可能的话，在 stackblitz 上复制您的问题
@Vivek 例如，当我想去 /training/image 时，它会带我去 /training
你是这样用的吗RouterModule.forChild(parentModuleRoutes)
那么我该如何解决这个问题？

标签： angular routing outlet

【解决方案1】：

将第一个路由改为全路径

 {path: '', component: ContainerComponent},

到

 {path: '', component: ContainerComponent, pathMatch: 'full'},

【讨论】：