如何为子组件中的命名路由器插座定义路由

我想构建一个包含两个不同子应用的角度4应用：main-app和admin-app。我在想具有被自举，并且具有一个应用程序部件仅<router-outlet>在模板：如何为子组件中的命名路由器插座定义路由

app.component
模板：<router-outlet></router-outlet>
路线：
“主” =>主应用内
“admin”=>管理员应用程序

主应用程序在模板中有一个router-outlet和一个named router-outlet，我想同时显示不同的组件。
主app.component
模板：<router-outlet></router-outlet><router-outlet name='action'></router-outlet>
路线：
“内容”=> content.component
“动作”=> action.component（在动作路由器出口显示）

我的问题是，“行动”路线不工作，即访问http://localhost:4200/main/app(action:action)或http://localhost:4200/main/app/content(action:action)当它不显示的动作路由器出口的action.component，而是给出了一个例外：

Error: Cannot match any routes. URL Segment: 'action'

我实际的路线是这样的：
APP-routing.module

const routes: Routes = [ 
    { 
    path: 'main', 
    loadChildren: "app/main-app/main-app.module#MainAppModule", 
    }, 
    { 
    path: 'admin', 
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule", 
    }, 
]

主APP-routing.module

const routes: Routes = [ 
    { 
    path: "", 
    redirectTo: "app", 
    pathMatch: "full" 
    }, 
    { 
    path: "app", 
    component: MainAppComponent, 
    children: [ 
     { 
     path: "content", 
     component: ContentComponent 
     }, 
     { 
     path: "action", 
     outlet: "action", 
     component: ActionComponent 
     } 
    ] 
    } 
]

我的问题：
如何我是否必须指定路线才能使其工作？
是否有另一种建议的方式来构建我的应用程序，它由两个子应用程序组成？

谢谢！

来源

2017-09-15 Matthias

它是否工作，如果它不是懒加载？延迟加载和辅助路由有一些问题，例如：https：//github.com/angular/angular/issues/15447 – DeborahK

我想通了，如何可以实现：

使用的网址：
http://localhost:4200/main/app/(content//action:action)
它的作品！

而且routerLink有看起来像这样：
<a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a>

这是主app.component.html：

<span><a [routerLink]="['/main/app', { outlets: { primary: 'content', action: null } }]" >content only</a></span> 
<span><a [routerLink]="['/main/app', { outlets: { primary: null, action: 'action' } }]" >action only</a></span> 
<span><a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a></span> 

<div>primary:</div> 
<div><router-outlet></router-outlet></div> 

<div>action:</div> 
<div><router-outlet name="action"></router-outlet></div>

也许有人知道另一个/更好的解决办法？

来源

2017-09-15 16:00:41 Matthias

而不是有一个命名的路由器插座，我实际上会嵌套路由组件。所以你的主要AppComponent只有一个路由器插座。而你的应用程序的路由很好，你有它的方式：

const routes: Routes = [ 
    { 
    path: 'main', 
    loadChildren: "app/main-app/main-app.module#MainAppModule", 
    }, 
    { 
    path: 'admin', 
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule", 
    }, 
]

但现在你为两个子应用程序创建两个单独的模块。 MainApp例如如下所示：

const mainAppRoutes: Routes = [ 
    { 
    path: 'main', 
    component: MainAppComponent, 
    children: [ 
     { 
     path: "content", 
     component: ContentComponent 
     }, 
     { 
     path: "action", 
     outlet: "action", 
     component: ActionComponent 
     } 
    ] 
    } 


@NgModule({ 
    imports: [ 
    RouterModule.forChild(mainAppRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class MainAppModule { } 


@Component({ 
    template: ` 
    <h2>Main App</h2> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class MainAppComponent { }

请注意，路由具有嵌套的子路由数组。这些路由实际上会插入到MainAppComponent路由器插座中，而不是插入到AppComponent路由器插座中。然后，您可以使用RouterModule.forChild（）方法将这些路由导入到MainAppModule中。这个设置仍然可以和我们的懒惰加载一起工作，而且我认为这会让你在你的领域更加清晰。

来源

2017-09-15 16:03:31 bgraham

如何为子组件中的命名路由器插座定义路由

回答

相关问题