从辅助子路由到父路由的角5路由会出现匹配错误。

Question

我已经为‘报告’添加了第二个路由器插座，这个路由器插座在报表的“布局”组件中。所有三个子路径都链接在一个“子菜单”组件中，当我回到“开始路线”(分配列表)时，我的问题就出现了。

错误:无法匹配任何路由。URL段：‘SE_556354-3353/%2 2Freports’错误

如何回到“根”/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 (又称“布局”)

<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

我将“根”-child的路由链接设置为“translation.link”{translation.link}“}”，然后将“根”-child(有路径‘)的路径设置为’./reports‘和voila。