[英]Angular 6 How to initialize auxiliary routes within a lazy loaded module
I'm working on a big application with angular, my problem is that i'm trying to make a wizard (as in step 1: fill this form, step 2: confirm your data, etc) with auxiliary route, my problem is that i don't know how to initialize the:我正在使用 angular 开发一个大型应用程序,我的问题是我正在尝试使用辅助路径制作一个向导(如第 1 步:填写此表格,第 2 步:确认您的数据等),我的问题是我不知道如何初始化:
<router-outlet name="wizard"></router-outlet>
with a predefined child route.带有预定义的子路由。
this is my routing.module.ts这是我的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: ''
}
}
]
}
];
also i tried to do it like this:我也试着这样做:
const routes: Routes = [
{
path: '',
component: AdminOutsourceComponent,
},
{
path: ' ',
redirectTo:'outsourcing'
} ,
{
path: 'outsourcing',
component: OutsourceComponent,
outlet:'wizard'
}
];
and和
const routes: Routes = [
{
path: '',
redirectTo: 'wizard'
},
{
path: 'wizard',
children: [
{
path: '',
component: AdminOutsourceComponent
},
{
path: '',
component: OutsourceComponent,
outlet: 'wizard'
}
]
}
];
the html template: html模板:
<div class="admin-wrapper">
outsource wizard
<router-outlet name="wizard"></router-outlet>
</div>
I tried reading the official documentation but nothing is said about this.我尝试阅读官方文档,但对此没有任何说明。 So far the
<router-outlet name="wizard"></router-outlet>
it just empty.到目前为止,
<router-outlet name="wizard"></router-outlet>
只是空的。 Here is a small application where i tried to replicate my issue.这是一个小应用程序,我试图在其中复制我的问题。 https://stackblitz.com/edit/angular-auxiliary-routes-cbufsy?embed=1&file=app/lazy/lazy-routing/lazy-routing.module.ts
https://stackblitz.com/edit/angular-auxiliary-routes-cbufsy?embed=1&file=app/lazy/lazy-routing/lazy-routing.module.ts
Note: this is an additional module that i load into my main aplication, not the main module, these submodules are lazyloaded.注意:这是我加载到主应用程序中的附加模块,而不是主模块,这些子模块是延迟加载的。 maybe i'm missing some configuration somewhere.
也许我在某处缺少一些配置。
UPDATE: Looks like a bug , not sure if it's fixed, some people still reporting problems.更新:看起来像一个错误,不确定它是否已修复,有些人仍在报告问题。
Can you try this?你能试试这个吗?
const routes: Routes = [ const 路由:路由 = [
{
path: '',
redirectTo: 'wizard'
},
{
path: 'wizard',
children: [
{
path: '',
component: AdminOutsourceComponent
},
{
path: '',
redirectTo: 'outsource',
outlet: 'wizard'
},
{
path: 'outsource',
component: OutsourceComponent,
outlet: 'wizard'
}
]
}
]; ];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.