我有三个命名的路由器插座,如下所示。
...
<router-outlet name="menus"><router-outlet>
<router-outlet><router-outlet>
<router-outlet name="footer"><router-outlet>
...
在标记中我想路由第一个,menus,到其中包含某些子菜单垃圾的组件在文档中显示 https://angular.io/guide/router.
<ul *ngFor="let main of menus;"
routerLink="[{outlets:{menus:[{{main.link}}]}}]"
class="nav-items">{{main.header}}
我收到的错误是这样的:
错误:无法匹配任何路由。 URL 段:“%5B%7Boutlets:%7Bmenus:%5Bsubmenu1%5D%7D%7D%5D”
我不知道语法有什么问题。谷歌搜索我的指甲但没有找到简陋的例子routerLink
显示如何在指定出口中指向路线的版本。
Edit:根据评论和示例,我需要重新编写正在使用的代码,但仍然出现相同的错误。在标记中:
<ul *ngFor="let main of menus;"
(click)="pullMenu(main.link)"
class="nav-items">{{main.header}}
然后,在 TS 中:
constructor(private router: Router, private route: ActivatedRoute) { }
pullSubmenu(input) {
console.log(input);
this.router.navigate(
[{ outlets: { menus: [input] } }],
{ relativeTo: this.route });
}
现在,我收到以下错误(submenu1是配置的路径的名称)。
错误:无法匹配任何路由。 URL 段:“submenu1”
我的路由是在模块中设置的,如下所示。
const routes: Routes = [
{ path: "submenu1", component: Submenu1Component },
{ path: "submenu2", component: Submenu2Component }
];
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
MainAreaComponent,
Submenu1Component,
Submenu2Component
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }