angular 5 从辅助子路由到父路由的路由给出匹配错误

Question

我已经为 'reports' 添加了第二个路由器出口，这个路由器出口位于 "layout" 报告组件中。所有三个子路由都链接到 'sub menu' 组件中，当我返回 'start route' （分配列表）时出现我的问题，这就是我得到

的地方

Error: Cannot match any routes. URL Segment: 'SE_556354-3353/%2Freports' Error

如何返回 "root"/parent（作业列表）？基本上，我怎样才能在这些链接之间跳转？

这里是相关代码。

app.module

const routes = [
{ path: ':orgNoParam/organizational-unit/:unitIdParam/employments', component: EmployeeComponent },
 {
    path: ':orgNoParam/reports', component: ReportsComponent, children: [
        { path: '', component: AssignmentListComponent, outlet: 'content' },
        { path: 'managers', component: AssignmentCompactManagersComponent, outlet: 'content' },
        { path: 'employments', component: AssignmentCompactEmployeesComponent, outlet: 'content' }
    ]
 }
];

reportsComponent（又名 "the layout"）

<div id="assignment">
<assignment-submenu></assignment-submenu>
<div>
    <!--angular error messages-->
    <error-message *ngIf="errorList?.length" [errorList]="errorList"></error-message>
</div>

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

Submenu.html（这是链接所在的位置）

<ul class="sub-menu" *ngIf="tempList && tempList.length">
<li *ngFor="let translation of tempList">

    <ng-container *ngIf="translation.link=='reports'">
        <a class="new-style" (click)="goToRoot()">{{ translation.name }}</a>
    </ng-container>

    <ng-container *ngIf="translation.link=='managers' || translation.link=='employments'">
        <a class="new-style" [routerLink]="[{ outlets: { content: [translation.link] } }]">{{ translation.name }}</a>
    </ng-container>

</li>

Submenu.ts

goToRoot() {
    this.router.navigate([this.orgNoParam, '/reports']);
}

Answer 1

我通过将 "root"-child 的路由器链接设置为 'routerLink="{{translation.link}}"'，然后设置 "root"-child 的路径（它有路径 ''）来解决它到 '../reports' 瞧。

angular 5 从辅助子路由到父路由的路由给出匹配错误

angular 5 routing from auxiliary children route to parent gives match error

angular-routing

angular

angular5