Href и routerlink моего подменю не работают, но другие ссылки в проекте работают нормально

Question

Я использую Angular 7 для создания веб-сайта, и у меня динамически создается строка меню навигации.Все пункты меню работают отлично (используя href), маршрутизация работает отлично.Но в одном компоненте у меня есть другие ссылки, которые должны направлять меня к различным компонентам, но эти и те, которые только не работают.Я пытался использовать href и routerLink, но ни один из них не работает.Но когда я осматриваю страницу и вручную нажимаю на ссылку в разделе href, она работает.

ссылка здесь "product / {{category.id}}. Я покажу вам мои маршруты.

<div class="row">
  <div class="menu-cat mx-auto">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li *ngFor="let categ of cat" class="nav-item">
        <a class="nav-link active" id="pizza-tab" data-toggle="pill" href="product/{{categ.id}}" role="tab" aria-controls="pizza"
          aria-selected="true">{{categ.name}}</a>
      </li> 
    </ul>
  </div>
</div>

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: ':categ/:id', component: PastriesComponent  },
    { path: 'Ice cream', component: IcecreamComponent },
    { path: 'FreakShake', component: FreakShakesComponent },
    { path: 'product/:id', component: EclairComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' }
];

, так как сопоставление маршрутов совпадает, я должен быть отправлен в EclairComponent, но когда я нажимаю на ссылку, ничего не происходит. Тем не менее, если я вручную пишу ссылку в строке поиска, это работает.

Заранее благодарю за помощь.

Answer 1

Не слишком углубляясь в это, оно выглядит так:

{ path: ':categ/:id', component: PastriesComponent  },

будет соответствовать до

{ path: 'product/:id', component: EclairComponent },

Попробуйте поменять порядок.

Другая проблема может заключаться в том, что {{category.id}} в вашей ссылке разрешается в "", и в этом случае ничего не будет совпадать.