角2名前付きアウトレット：未知（約束）：エラー：いずれのルートにも一致しません。 URLセグメント：顧客管理アプリで

Question

、私は以下を持ってしようとしている：

• クライアントリスト（ページの左側）
• クライアントの詳細（thePageの右側）ダッシュボード/クライアント/ 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が存在しないからです。お使いのモジュールで

パスがツリーにあなたが相対パス: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バグです：あなたがやろうとすることができることは

path: '', 
 
component: ClientListComponent,

の空のパスを変更することです Secondary child outlet inside empty primary segment does not match

〜

path: 'whatever', 
component: ClientListComponent,