如何为子组件中的命名路由器出口定义路由

Question

我想构建一个 angular 4 应用程序，它由两个不同的子应用程序组成：主应用程序和管理应用程序。我正在考虑拥有一个自举的应用程序组件，并且模板中只有 <router-outlet>:

app.component
模板：<router-outlet></router-outlet>
路线：
"main" => 主应用程序
"admin" => 管理应用程序

主应用程序在模板中有一个 router-outlet 和一个命名的 router-outlet，我想在其中同时显示不同的组件。
主-app.component
模板：<router-outlet></router-outlet><router-outlet name='action'></router-outlet>
路线：
"content" => content.component
"action" => action.component（显示在 action router-outlet 中）

我的问题是 "action" 路由不工作，即不显示访问http://localhost:4200/main/app(action:action)或http://localhost:4200/main/app/content(action:action)时，action router-outlet中的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",
  },
]

主应用-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
      }
    ]
  }
]

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

谢谢！

Answer 1

我想出了如何实现它：

通过使用 URL:
http://localhost:4200/main/app/(content//action:action)
有效！

路由器链接必须如下所示：
<a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a>

这是main-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>

也许有人知道another/better解决方案？

Answer 2

我不会使用命名的路由器插座，而是使用嵌套的路由组件。因此，您的主要 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。此设置仍适用于我们的延迟加载，我认为会让您在您的区域中有更清晰的分隔。

如何为子组件中的命名路由器出口定义路由

How to define routes for named router outlets which are in a sub component

angular-ui-router

angular2-routing

angular