Question

我在顶部有一个主导航栏，其中包含首页（/）和信息（/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>

information.component.html

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

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

Answer 1

从routes.path中删除/，它可以作为参考，请参见

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

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

1 个答案: