javascript - 嵌套页面上的 Angular 5 多个路由器导出

Question

问题是我正在使用的嵌套路由器 socket 与子页面上有多个路由器 socket 的组合。为简单起见，我有一个带有“登录”链接的主页

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

登录然后转到:Active.Module。这就像一个主页，可以有很多区域(路由器 socket )，每个区域做不同的事情(组件)。 事件.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>

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

主页 -> 登录“启动页面” Active Root -> 主页应该是什么 项目管理显示在未命名的路由器 socket 中 未命名路由器导出中的执行显示 SECONDARY 是问题所在...它不会显示在指定的 socket 中。

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) 页面的某些区域(未命名和命名路由器导出)包含来自特定于该页面的其他子组件的内容。

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

Yaga 士

Answer 1

好吧，我明白了。有点笨拙，但是:在实际应用程序中，使用按钮而不是 anchor (或者至少在单击选择时转到函数)会更好。我这样说是因为实际上我必须将 url 组合成一个字符串，然后导航到它。

首先，为路由中的每个 child 添加特定的导出，如下所示:

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

在我的 anchor 中，将项目管理和执行的两个更改为:

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

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