在 Angular 中创建第二个路由器出口时解析错误

Question

我正在尝试使用 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'] } }]"

Answer 1

你有没有尝试过？

[routerLink]="['' ,{outlets:{'side-mod':'table-list'}}]

问题可能来自-未被识别为有效关键字符的字符，包裹在""这应该可以工作，我也摆脱了[]数组。

Answer 2

尝试删除 - 从 side-mod 到 sideMod 或 side_mod