Question

我试图实现一个基本的辅助路由设置，受到我在this plunk上找到的演示的启发。

我有一个app模块，延迟加载主模块。

这是我的app-routing模块：

const routes: Routes = [{
    path: '',
    loadChildren: 'app/main/main.module#MainModule',
    canActivate: [AuthenticationGuard],
}, {
    path: 'login',
    component: LoginComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
}, {
    path: 'foo',
    component: FooComponent,
    outlet: 'side',
}, {
    path: 'home',
    redirectTo: '/',
    pathMatch: 'full',
}, {
    path: '**',
    component: PageNotFoundComponent
}];

这是我的app.component.html：

<router-outlet>
</router-outlet>

<p>Side:</p>

<router-outlet name='side'>
</router-outlet>

现在当我进入我的地址栏时：

http://localhost:4200/login(side:foo)

一切都按预期工作。

我在延迟加载的主模块中使用了非常相似的设置。

main.routing.ts：

{
    path: 'main',
    component: MainComponent,

},

{
    path: 'red',
    component: RedComponent,

}, {
    path: 'green',
    component: GreeenComponent,
    outlet: 'color'
}, {
    path: 'blue',
    component: BlueComponent
},

main.component.html：

<router-outlet></router-outlet>

<p>Color:<p>
<router-outlet name="color"></router-outlet>

但它没有用。我无法让我的GreenComponent显示在我指定的路由器插座中。我收到了错误：

错误：无法匹配任何路线。网址细分：＆＃39;绿色＆＃39;

有人可以帮忙吗？

Angular2路由：辅助路由不适用于延迟加载的模块

0 个答案: