从辅助路由到根的 Angular 6 路由答案

【问题标题】：Angular 6 routing to root from aux routes从辅助路由到根的 Angular 6 路由
【发布时间】：2018-10-30 00:11:59
【问题描述】：

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

每当我路由到我的任何主要导航栏的路由时，我都会收到 Cannot match any routes 错误，并且我的 URL 前面有一个额外的斜杠。所以如果我点击主页，我希望 URL 是 /，但它是 //。

这里有一些代码：

app-routing.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>

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

【问题讨论】：

标签： angular routes

【解决方案1】：

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

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

【讨论】：

我在 routes.path 中没有任何前导斜杠
routes = [ { name: 'Home', path: '/' }, { name: 'Information', path: '/information' }, ... ];对于这个
对不起，我误读了您的评论。但是当我删除前导斜杠时，它会路由到/information/(information//aux:item1) 之类的东西。它将路由附加到辅助路由而不是根。