在客戶管理應用程序,我想有以下幾點:Angular 2命名出口:未捕獲(承諾):錯誤:無法匹配任何路線。 URL段:
- 客戶名單(頁面的左側)
- 客戶詳細(翻動書頁的右側)儀表板/客戶端/編號/
- 添加一個客戶端(右側的頁面)。儀表板/客戶/新。
- 編輯客戶端(頁面右側)。儀表板/客戶端/編號/編輯
我想只在右側更改視圖,具體取決於用戶點擊的內容。
路由器配置
//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>
這給了我相同的結果。錯誤:無法匹配任何路線。網址細分:'id/edit',其中id是客戶端的相應ID。 –
糟糕。我忘記了'router.navigate()'不會假定路徑默認是相對的。我用更正的語法更新了我的答案。我從來沒有試圖將'outlets'和'relativeTo'參數結合起來。請確認相關語法是否有效,只要您有機會嘗試。 – AngularChef
我還沒有運氣,但現在我用這個,它得到的東西: 'this.router.navigate([{outlets:{'section1':['edit']}}],{relativeTo :this.route});' 但是,當我點擊「編輯」後,表單會在客戶端的詳細信息之上呈現。我只想刪除詳細信息視圖並打開包含詳細信息的表單,以便用戶進行編輯。路由器配置有什麼問題,或者我怎樣才能最好地解決這個問題?請參閱我的問題的編輯版本以供參考。 –