Angular 6 如何在延迟加载的模块中初始化辅助路由答案

【问题标题】：Angular 6 How to initialize auxiliary routes within a lazy loaded moduleAngular 6 如何在延迟加载的模块中初始化辅助路由
【发布时间】：2018-09-13 19:18:07
【问题描述】：

我正在使用 Angular 开发一个大型应用程序，我的问题是我正在尝试使用辅助路线制作一个向导（如步骤 1：填写此表格，步骤 2：确认您的数据等），我的问题是我不知道如何初始化：

 <router-outlet name="wizard"></router-outlet>

带有预定义的子路由。

这是我的 routing.module.ts

import { AdminOutsourceComponent } from './admin-outsource.component';
import { OutsourceComponent } from "./outsource/outsource.component";

    const routes: Routes = [


       {
        path: '',
         component: AdminOutsourceComponent,

        children: [
             {
                path: ' ',
                redirectTo:'outsourcing'
              } ,
             {
                path: 'outsourcing',
                component: OutsourceComponent,
                outlet:'wizard',
                data: {
                  title: ''
                }
              } 
        ]
      }
    ];

我也尝试过这样做：

const routes: Routes = [


         {
            path: '',
             component: AdminOutsourceComponent,

          },
         {
            path: ' ',
            redirectTo:'outsourcing'
          } ,
         {
            path: 'outsourcing',
            component: OutsourceComponent,
            outlet:'wizard'
          } 
];

和

const routes: Routes = [

       {
        path: '',
        redirectTo: 'wizard'
    },

      {
            path: 'wizard',
            children: [
                {
                    path: '',
                    component: AdminOutsourceComponent
                },
                {
                    path: '',
                    component: OutsourceComponent,
                    outlet: 'wizard'
                }
            ]
        }
];

html 模板：

<div class="admin-wrapper">   
outsource wizard
  <router-outlet name="wizard"></router-outlet>
</div>

我尝试阅读官方文档，但对此没有任何说明。到目前为止，<router-outlet name="wizard"></router-outlet> 只是空的。这是一个小应用程序，我试图在其中复制我的问题。 https://stackblitz.com/edit/angular-auxiliary-routes-cbufsy?embed=1&file=app/lazy/lazy-routing/lazy-routing.module.ts

注意：这是我加载到我的主应用程序中的一个附加模块，而不是主模块，这些子模块是延迟加载的。也许我在某处遗漏了一些配置。

更新：Looks like a bug，不确定是否已修复，仍有人报告问题。

【问题讨论】：

两个精灵孩子似乎有相同的路径....？
@RoddyoftheFrozenPeas 我尝试根据这个问题使用这个解决方案：stackoverflow.com/a/39588648/2796268
当我打开你的 stackblitz 并取消注释 app.routes.ts 中的第 14-18 行时，辅助路由正在被 ComponentAux 初始化。所以你已经找到解决方案了吗？还是我在您的问题中遗漏了什么？
@Luckylooke 阅读了我的问题中的更新部分，人们仍然报告使用延迟加载模块时它不起作用的功能。
@B.J.A.A.是的，这似乎与我的问题相同.. 这是你的 stackblitz 的分支，你可以更新你的问题stackblitz.com/edit/…

标签： angular

【解决方案1】：

你可以试试这个吗？

常量路由：Routes = [

   {
    path: '',
    redirectTo: 'wizard'
},

  {
        path: 'wizard',
        children: [
            {
                path: '',
                component: AdminOutsourceComponent
            },
            {
                path: '',
                redirectTo: 'outsource',
                outlet: 'wizard'
            },
            {
                path: 'outsource',
                component: OutsourceComponent,
                outlet: 'wizard'
            }
        ]
    }

];

【讨论】：