Question

作为我应用程序的根，我有一条指向演示模块的“演示”路由，该模块可以处理网站上的所有演示：

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

然后，在演示模块的路由模块中，我具有所有演示，其中一些也是模块，例如

{
  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，将看到带有页眉，页脚和显示LeftnavBasicComponent和Content1Component的2个路由出口的splitviews组件。

但是现在我需要做的是让LeftnavBasicComponent中的 links 在路由器内部加载不同的内容组件（例如Content2Component） -出口“内容”。而且我不确定如何最好地配置这些子路由。

Answer 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 打字稿文件中，我们必须从网址中获取 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>

对于内容占位符，将执行相同的操作。

这样做之后，如果调用/ demo / splitviews / basic / type1 / content3，则type1组件将被加载到左侧导航占位符中，而content3组件将被加载到内容占位符中，，您可以然后在导航部分中生成所需的链接，以在内容部分中加载特定组件。

这可能不是完美的解决方案，但它可以解决您的问题。

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

如果需要，很高兴澄清更多信息！

深度嵌套的Angular路线

1 个答案: