嵌套页面上的5个多个路由器出口

Question

问题是我已经工作的嵌套路由器插座的组合，在子页面上有多个路由器插座。为简单起见，我有一个带有“登录”链接的主页

<h3>HOME COMPONENT (Splash Page)</h3>
<a [routerLink]="['/activeRoot']">Login</a>

登录然后转到：Active.Module。这就像一个主页面，可以有许多区域（路由器出口），每个区域都做不同的事情（组件）。 Active.html：

<h3>ACTIVE COMPONENT - main overwrites Splash</h3>
<div [ngStyle]="{'display': 'flex', 'flex-direction': 'row'}">
  <div [ngStyle]="{'border': '1px solid green', 'margin': '20px'}">
    <ul>
      <li>
        <a routerLink='/home'>Home</a>
      </li>
      <li>
        <a routerLink='/activeRoot'>Active Root</a>
      </li>
      <li>
        <a routerLink='ProjectMgmt'>Project Management</a>
      </li>
      <li>
        <a routerLink='Execution'>Execution</a>
      </li>
      <li>
        <a routerLink="[ 'ProjectMgmt', {outlets: {'secondaryOutlet': ['Secondary']}]">SECONDARY</a>
      </li>
    </ul>
  </div>
  <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }">
    <router-outlet></router-outlet>
  </div>
  <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }">
    <router-outlet name="secondaryOutlet"></router-outlet>
  </div>
</div>

在浏览器中，它看起来像这样：

首页 - >登录“启动页面”活动根目录 - >应该是主页面项目管理显示在未命名的路由器插座中未命名的路由器插座中的执行显示SECONDARY是问题...它不会显示在指定的插座中。

app-routing.module的路由定义为：

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'activeRoot', component: ActiveComponent, children: [
    {path: 'ProjectMgmt', component: ProjectMgmtComponent},
    {path: 'Execution', component: ExecutionComponent },
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' }
  ]},
  {path: '**', component: InvalidPageComponent}
];

当我单击SECONDARY链接时，路由最终获取InvalidPageComponent路径。

将此转换为实际应用程序时的唯一要求：

a）一定数量的父页面，其内容出现在“全局”应用程序路由器插座中（当然需要）。

b）这些页面中的一个样本（如Active）具有“正常”内容，如左侧绿色框。

c）页面的某些区域（未命名和命名的路由器出口）包含来自该页面特定的其他子组件的内容。

我想我已经尝试过这个星球上的每个站点和掠夺者，但是......没有运气。我感谢您的帮助。提前致谢。

瑜珈

Answer 1

好的，我明白了。有点笨拙，但是：在实际应用中，通过使用按钮而不是锚点（或者至少在单击选择时转到函数）可以做得更好。我这样说是因为实际上我必须将url组装成一个字符串，然后导航到它。

首先，为路线中的每个孩子添加特定的出口，如下所示：

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'activeRoot', component: ActiveComponent, children: [
    {path: 'ProjectMgmt', component: ProjectMgmtComponent, outlet: 'primaryOutlet'},
    {path: 'Execution', component: ExecutionComponent, outlet: 'primaryOutlet' },
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' }
  ]},
  {path: '**', component: InvalidPageComponent}
];

在我的主播中，将项目管理和执行中的两个更改为：

  <li>
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['ProjectMgmt'], 'secondaryOutlet': ['Secondary']}}]">Project Management</a>
  </li>
  <li>
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['Execution'], 'secondaryOutlet': ['Secondary']}}]">Execution</a>
  </li>

这正确地填充了每个插座，但是如您所见，能够为左侧或右侧插座选择新组件将意味着必须计算导航路径。