Angular 2命名出口：未捕獲（承諾）：錯誤：無法匹配任何路線。 URL段：

Question

在客戶管理應用程序，我想有以下幾點：

• 客戶名單（頁面的左側）
• 客戶詳細（翻動書頁的右側）儀表板/客戶端/編號/
• 添加一個客戶端（右側的頁面）。儀表板/客戶/新。
• 編輯客戶端（頁面右側）。儀表板/客戶端/編號/編輯

我想只在右側更改視圖，具體取決於用戶點擊的內容。

路由器配置

//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不存在。

你的模塊中的路徑是通過連接所有的路徑樹（父母+孩子+孩子......），這意味着你最終的相對路徑:id/edit，或者絕對路徑計算/dashboard/client/:id/edit。

嘗試使用此代碼：

// Note. An `id` property must be defined/accessible in your code. 

// Relative path syntax 
// NB. `ActivatedRoute` must be injected into the `route` property. 
this.router.navigate([{ outlets: { 'section1' : [id, 'edit'] } }, { relativeTo: this.route }]); 

// Absolute path syntax 
this.router.navigate([{ outlets: { 'section1' : ['dashboard', 'client', id, 'edit'] } }]); 

Answer 2

這是一個angular2錯誤：Secondary child outlet inside empty primary segment does not match

什麼，你可以嘗試做的是改變

path: '', 
 
component: ClientListComponent,

空路徑

到

path: 'whatever', 
component: ClientListComponent,