我在我的 angular 应用程序中设置第二个路由器插座时遇到问题。 下面是一个图表,展示了我想要实现的目标: 问题是即使我在以下路径中的应用程序路由中声明: {path:'componentH', component: ComponentH, outlet:'second'}我收到一条错误消息 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我正在尝试使用 Routerlink 创建一个简单的按钮,但出现此错误:
解析器错误:[[{outlets: {side-mod: ['table-list']}}]] 中第 37 列的意外标记“}”
我想做的是为路由器创建第二个插座。 所以我在我的路由组件中有这个:
const routes: Routes = [
{ path: 'home', component: HomeComponent, outlet:'header' },
{ path: 'login', component: LoginComponent, outlet:'header'},
{ path: 'register', component: RegisterComponent, outlet:'header' },
{ path: 'user', component: BoardUserComponent, outlet:'header' },
{ path: 'table-list', component: TableListComponent, outlet:'side-mod'},
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
因此,“索引”在 header 处有这种按钮:
<a class="nav-link" [routerLink]="[{outlets: {header: ['user']}}]" skipLocationChange="true" replaceUrl="false">Home </a>
和底部的路由器显示不同的页面:
<router-outlet name="header"></router-outlet>
因此,当用户按下 header 按钮查看“用户”页面时,会出现一个带有使用另一个“插座”按钮的新组件,但会出现错误:
<a class="list-group-item list-group-item-action bg-light" [routerLink]="[{outlets: {side-mod: ['table-list']}}]">Tables</a>
我尝试了很多方法来修复它,例如将其更改为此代码,但出现了相同的错误:
[routerLink]="['', { outlets: { side-mod: ['table-list'] } }]"
你有没有尝试过?
[routerLink]="['' ,{outlets:{'side-mod':'table-list'}}]
问题可能来自-
未被识别为有效关键字符的字符,包裹在""
这应该可以工作,我也摆脱了[]
数组。
尝试删除 - 从 side-mod 到 sideMod 或 side_mod
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.