![](/img/trans.png)
[英]Angular auxiliary routes with named router-outlets: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment
[英]Angular 2 Named Outlet: Uncaught (in promise): Error: Cannot match any routes. URL Segment:
在客户管理应用程序中,我尝试具有以下功能:
我只想根据用户单击的内容在右侧更改视图。
路由器配置
//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>
这是因为路径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'] } }]);
这是一个angular2错误: 空的主要网段内的辅助子出口不匹配
您可以尝试做的是更改
path: '', component: ClientListComponent,
至
path: 'whatever',
component: ClientListComponent,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.