Ошибка синтаксического анализа при создании второго выхода маршрутизатора в Angular

#angular

#angular

Вопрос:

Я пытаюсь создать простую кнопку с помощью Routerlink, но я получаю эту ошибку:

Ошибка синтаксического анализа: неожиданный токен ‘}’ в столбце 37 в [[{outlets: {side-mod: [‘table-list’]}}]]

То, что я пытаюсь сделать, это создать второй выход для маршрутизатора. Итак, у меня есть это в моем компоненте маршрутизации:

 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' }
];
 

Итак, «индекс» имеет такие кнопки в заголовке:

  <a class="nav-link" [routerLink]="[{outlets: {header: ['user']}}]" skipLocationChange="true" replaceUrl="false">Home </a>
 

И маршрутизатор внизу, чтобы показать разные страницы:

 <router-outlet name="header"></router-outlet>
 

Поэтому, когда пользователь нажимает кнопку заголовка, чтобы увидеть страницу «пользователь», появляется новый компонент с кнопками, который использует другой «выход», но появляется ошибка:

 <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'] } }]"
 

Комментарии:

1. не могли бы вы сделать стекблитц?

Ответ №1:

Попробуйте удалить — из side-mod в sideMod или side_mod

Комментарии:

1. Да, проблема заключалась в этом. Теперь у меня другая проблема: не отображается компонент, но нет этой ошибки.

2. Можете ли вы немного рассказать, чего вы пытаетесь достичь с помощью этого второго выхода маршрутизатора?

3. Да, это компонент с навигацией внутри. Но маршрутизатор пытается перемещаться, делая как user / sideMod. Так что это не работает. В основном у меня есть заголовок с кнопками (user, home и т. Д.). Пользователь кнопки — это ссылка на маршрутизатор, которая показывает компонент. У этого компонента тоже есть система навигации, похожая на заголовок, поэтому мне тоже нужен маршрутизатор. Надеюсь, вы меня понимаете.

Ответ №2:

вы пробовали?

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

проблема может возникнуть из-за - символа, который не распознается как действительный ключевой символ, обернутый вокруг "" этого, должен работать, я также избавился от [] массива.