时间戳

首页 > 解决方案 > 从辅助路由到根的 Angular 6 路由

angular - 从辅助路由到根的 Angular 6 路由

问题描述

我在顶部有一个主导航栏，其中包含 Home( /) 和 Information( /information) 项。在 上/information，我还有一个带有一堆项目的侧边栏。我正在为这些项目使用辅助路由，以便得到类似/information(aux:item1).

每当我路由到我的任何主要导航栏的路由时，我都会Cannot match any routes在我的 URL 前收到一个带有额外斜杠的错误。因此，如果我单击主页，我希望 URL 是/，但实际上是//。

这是一些代码：

应用程序路由.module.ts

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: full },
    { 
        path: 'information',
        component: InformationComponent,
        children: [
            { path: 'item1', component: OneComponent, outlet: 'aux' },
            { path: 'item1', component: TwoComponent, outlet: 'aux' },
            ...
        ]
    }
];

navbar.component.ts

routes = [
    { name: 'Home',  path: '/' },
    { name: 'Information', path: '/information' },
    ...
];

ngOnInit() {
    this.router.events.subscribe((event) => {
        if (event instanceof NavigationStart)
            console.log(event.url); // Prints '//' when navigated to '/' and '//information' when navigated to '/information'
    }
}

navbar.component.html

<a *ngFor="let r of routes" '[routerLink]'="[{ outlets: { primary: route.path, aux: null } }]">{{ route.name }}</a>

信息.component.html

<ul>
    <li><a [routerLink]="[{ outlets: { 'aux': 'item1' } }]"></a></li>
    <li><a [routerLink]="[{ outlets: { 'aux': 'item2' } }]"></a></li>
</ul>

我想我的问题是，为什么要在我的路线中添加一个额外的斜线？我该如何解决这个问题，以便我可以在辅助路由和主根路由之间来回切换？

标签： angularroutes

解决方案

从 routes.path 中删除 / 它将供参考，请参阅

https://angular-2-training-book.rangle.io/handout/routing/aux-routes.html

推荐阅读