3

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

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

浏览器中的 Home 组件

然后登录到：Active.Module。这就像一个主页，可以有许多区域（路由器插座），每个区域都做不同的事情（组件）。活动.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>

在浏览器中，它看起来像这样： 多出口页面

主页->登录“启动页面”活动根目录->应该是主页项目管理显示在未命名的路由器出口中执行显示在未命名的路由器出口中第二个是问题......它不显示在命名的出口中.

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，但是......没有运气。我感谢您的帮助。提前致谢。

瑜伽士

4

1 回答 1

3

好吧，我想通了。有点笨拙，但是：在实际应用程序中，使用按钮而不是锚（或至少在单击选择时转到一个函数）会更好。我这样说是因为实际上我必须将 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>

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

于 2017-12-15T23:13:58.527 回答