Angular 2命名出口：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：

Question

在客户管理应用程序中，我试图拥有以下内容：

• 客户列表（页面左侧）
• 客户详细信息（页面右侧）信息中心/客户端/ ID /
• 添加客户端（页面右侧）。仪表板/客户/新。
• 编辑客户端（页面右侧）。仪表板/客户端/ ID /编辑

我想根据用户点击次数在右侧更改视图。

路由器配置

//imports removed to make this shorter

const clientRoutes: Routes = [
  {
    path: '',
    component: ClientsComponent,
    children: [
      {
        path: '',
        component: ClientListComponent,
        children: [
          { path:'new', 
            component: ClientNewComponent
          },
          { path: ':id', 
            component: ClientDetailComponent,
            resolve: { client: ClientDetailResolver},
            children: [
              { path:'edit',
                outlet: 'section1',
                component: ClientEditComponent,
              },
            ]
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(clientRoutes)],
  exports: [RouterModule ],
  providers: [ClientDetailResolver]
})
export class ClientRouting { }

客户列表组件HTML

<div class="col-md-5">
  <div class="row button-wrapper">
    <div class="search-client">
      <i class="search-strong" ></i>
      <input id="searchInput" [(ngModel)]="term" placeholder="Search client by Name or Phone..." type="text">
    </div>
    <button type="button" class="btn-client-details" (click)="onSelectNew()">New Client</button>
  </div>
  <div>
      <div *ngIf="(clients | async)?.length==0">Add a Client</div>
      <div *ngIf="(clients | async)?.length>0" class="vertical-scroll">
        <table class="table">
          <thead>
          <tr class="muted">
            <th>Name</th>
            <th>Phone</th>
            <th>Client ID</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of clients | async | filter:term"
            (click)="onSelect(item)">
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.id}}</td>
          </tr>
          </tbody>
        </table>
      </div>
  </div>
</div>
<router-outlet></router-outlet>

客户详细信息组件

 onSelectEdit(): void {
 this.router.navigate([{ outlets: { 'section1' : ['edit'] } }], { relativeTo: this.route });

客户详细信息组件HTML

<div class="col-md-7">
 <div>
  <button type="button" class=" btn-client-details"
    (click)="onSelectEdit()">Edit</button>
</div>

<router-outlet name="section1"></router-outlet>

<div *ngIf="client">

//Show all client details for a selected client here {name}{address}etc
</div>
</div>

Answer 1

这是因为路径edit不存在。

模块中的路径是通过连接树中的所有路径（父级+子级+子级...）计算的，这意味着最终得到相对路径 {{1} }，或绝对路径 :id/edit。

尝试使用此代码：

/dashboard/client/:id/edit

Answer 2

这是一个有角度的错误：Secondary child outlet inside empty primary segment does not match

您可以尝试做的是更改

的空路径

＆＃13;

＆＃13;

path: '',
component: ClientListComponent,

＆＃13;

＆＃13;

＆＃13;

到

path: 'whatever',
component: ClientListComponent,