Question

我正在使用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，不确定是否已解决，有些人仍在报告问题。

Answer 1

你可以试试吗？

const路由：路由= [

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

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

];

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

1 个答案: