如何爲子組件中的命名路由器插座定義路由

我想構建一個包含兩個不同子應用的角度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

如何爲子組件中的命名路由器插座定義路由

回答

相關問題