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

Question

问题是我已经工作的嵌套路由器插座的组合，在子页面上有多个路由器插座。为简单起见，我有一个主页，其中包含＆＃34;登录＆＃34;链路

<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>

here

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

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}
];

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

主页 - ＆gt;登录＆＃34;启动页面＆＃34; 活跃根 - ＆gt;什么应该是主页 项目管理显示在未命名的路由器插座中 执行显示在未命名的路由器插座中 SECONDARY是问题......它不会显示在指定的插座中。

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

{{1}}

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

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

a）一定数量的父页面，其内容出现在＆＃34; global＆＃34;应用路由器插座（当然需要）。

b）这些页面中的一个样本（如Active）具有正常的＆＃39;内容如左侧绿框。

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>

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