Question

我在正确显示路由器插座时遇到问题。在页面加载中，当未加载路由时，我的行div中的第一列被截断。这两个屏幕截图概述了该问题，第一个屏幕截图是出现错误的情况，第二个屏幕截图是在路由器从列表中加载项目的情况下可以正常工作的情况。

我也尝试在空路由上加载默认组件。但是，这会加载组件，但左侧的应用程序列表仍会中断。似乎必须加载WiDetailComponent才能以完整尺寸显示列表。有没有一种方法可以首先加载WiDetailComponent以外的组件，并且列表仍在左侧显示完整尺寸？

这是我的html代码：

<div class="row" style="padding-top: 10px;">
  <div class="col-md-3">
    <app-wi-list></app-wi-list>
  </div>
  <div class="col-md-9">
    <router-outlet></router-outlet>
  </div>
</div>

以及相关路线：

{path: 'work', component: WorkItemComponent, children: [
    {path: ':id', component: WiDetailComponent}
  ]},

Answer 1

您是否尝试过使用像这样的两个插座？默认值将用于列表组件，另一个名称可能是“ detailbar”，用于细节组件：

<div class="row" style="padding-top: 10px;">
  <div class="col-md-3">
    <router-outlet></router-outlet>
  </div>
  <div class="col-md-9">
    <router-outlet name="detailbar"></router-outlet>
  </div>
</div>

并且路线应采用这种方式，详细信息组件的出口名称为“ detailbar”：

{
path: '', component: ListWorkItemComponent, children: [
  { path: 'detail1', component: WiDetailComponent, outlet: "detailbar" }
]},

Angular 6路由器插座显示问题

1 个答案: