深度嵌套的 Angular 路由答案

【问题标题】：Deeply nested Angular routes深度嵌套的 Angular 路由
【发布时间】：2018-07-10 12:49:17
【问题描述】：

作为我的应用程序的根目录，我有一个“演示”路由到处理网站上所有演示的模块：

{
  path: 'demo',
  canActivate: [AuthGuardService],
  loadChildren: './demo/demo.module#DemoModule'
}

然后，在demo模块的路由模块中我有所有的demo，其中一些也是模块，比如

{
  path: 'splitviews',
  loadChildren: './splitviews/splitviews.module#SplitviewsModule'
}

这是“Splitviews”类型的演示模块，组件具有 2 个命名路由出口：1 个用于左侧导航，1 个用于内容：

<app-header class="site-header"></app-header>

<div class="site-content"></div>
<div [ngClass]="containerType"
    class="splitview-wrapper">

  <div class="row">
    <div class="col-sm-2"">
      <router-outlet name="leftnav"></router-outlet>
    </div>
    <div class="col-sm-10">
      <router-outlet name="content"></router-outlet>
    </div>
  </div>
</div>

<app-footer class="site-footer"></app-footer>

到目前为止，这个模块有这样的路由

path: 'basic',
component: SplitviewsComponent,
data: {
  containerType: 'container'
},
children: [
  {
    path: '',
    component: LeftnavBasicComponent,
    outlet: 'leftnav'
  },
  {
    path: '',
    component: Content1Component,
    outlet: 'content'
  }
]
},

所以现在，如果您转到 /demo/splitviews/basic，您会看到带有页眉、页脚和两个路由出口的 splitviews 组件显示 LeftnavBasicComponent 和 Content1Component。

但是现在我需要做的是让 LeftnavBasicComponent 中的链接在 router-outlet "content 中加载不同的内容组件（例如 Content2Component） ”。而且我不确定如何最好地配置这些子路由。

【问题讨论】：

为什么不为具有path: '' 的子组件创建一个组件，然后让该组件将LeftnavBasicComponent 和Content1Component 作为子组件导入？
我希望能够同时切换左Mac和内容来演示不同类型的左导航和内容组合。

标签： javascript angular angular2-routing

【解决方案1】：

您可以使用 LeftnavBasicComponent 和 Content1Component 作为占位符，然后您真正想要显示的组件将根据您将通过 url 传递的值加载到其中.

您的 html 将如下所示

<app-header class="site-header"></app-header>

<div class="site-content"></div>
<div [ngClass]="containerType"
    class="splitview-wrapper">

  <div class="row">
    <div class="col-sm-2"">
      <app-leftnav></app-leftnav>
    </div>
    <div class="col-sm-10">
      <app-content></app-content>
    </div>
  </div>
</div>

app-leftnav 和 app-content 分别是 LeftnavBasicComponent 和 Content1Component 的选择器。

路由模块如下所示：

{
path: 'basic/:leftnavtype/:contenttype',
component: SplitviewsComponent,
data: {
  containerType: 'container'
}
}

现在在 LeftnavBasicComponent 打字稿文件中，我们必须从 url 中获取 leftnavtype 的值并将其放入如下变量中：

leftNavType: string;

ngOnInit() {
  this.route.params.subscribe((params: Params) => {
    this.leftNavType = params["leftnavtype"];
  });
}

最后在 LeftnavBasicComponent html 文件中，我们根据 leftNavType 值显示特定组件

<app-type-1-left-nav *ngIf="leftNavType==='type1'"></app-type-1-left-nav>
<app-type-2-left-nav *ngIf="leftNavType==='type2'"></app-type-2-left-nav>

content占位符也是如此。

这样做之后，如果你调用/demo/splitviews/basic/type1/content3，type1组件会被加载到left nav placeholder中，content3组件会被加载到content placeholder中，你可以然后在导航部分生成你想要的链接来加载内容部分的特定组件。

这可能不是完美的解决方案，但它适用于您的情况。

如果只有少数情况，我建议只为每个情况创建一条路线，这两种解决方案都可以根据您的需要工作。

如果需要，很乐意澄清更多！

【讨论】：