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

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

：

应用程序组件
模板：

路线：
“main”=>主应用程序
“管理员”=>管理员应用程序

主应用程序在模板中有一个路由器出口和一个命名路由器出口，我想在其中同时显示不同的组件。
主要应用程序组件
模板：

路线：
“内容”=>content.component
“action”=>action.component（显示在action路由器出口中）

我的问题是“动作”路线不起作用，即不显示 访问

http://localhost:4200/main/app（操作：操作）

或

http://localhost:4200/main/app/content（操作：操作）

，但给出了一个例外：

错误：无法匹配任何路由。URL段：“操作”

我的实际路线如下所示：
应用程序路由。模块

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

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

主应用程序路由。模块

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

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

我的问题：
我必须如何指定路线才能使其工作？
是否有其他建议的方法来构建包含两个子应用程序的my app

---

谢谢大家!

我找到了实现的方法：

通过使用URL：

http://localhost:4200/main/app/（内容//动作：动作）

它起作用了

routerLink必须如下所示：

内容和操作

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

仅限内容
仅限行动
内容与行动
主要：
行动：

---

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

我实际上会有嵌套的路由组件，而不是有一个命名的路由器出口。因此，您的主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 { }

const mainproutes:Routes=[
{
路径：'主'，
组件：MainAppComponent，
儿童：[
{
路径：“内容”，
组件：ContentComponent
},
{
路径：“行动”，
出口：“行动”，
组件：ActionComponent
}
]
}
@NGD模块({
进口：[
用于孩子的路由模块（主要批准）
],
出口：[
路由模块
]
})
导出类MainAppModule{}
@组成部分({
模板：`
主应用程序
`
})
导出类MainAppComponent{}

---

请注意，这些路由具有嵌套的子路由数组。这些路由实际上将插入MainAppComponent路由器出口，而不是AppComponent路由器出口。然后，您可以使用RouterModule.forChild（）将这些路由导入MainAppModule方法。此设置仍然适用于我们的延迟加载，并且我认为将在您的区域中为您提供更清晰的分隔。

如果不是延迟加载，它是否有效？延迟加载和辅助路由存在一些问题，例如：