在 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