我的子菜单的href和routerlink不起作用，但项目中的其他链接工作正常

Question

我正在使用Angular 7构建一个网站，我有一个动态生成的导航菜单栏。所有菜单项都完美运行（使用href），路由工作正常。但在一个组件中我有其他链接应该将我路由到不同的组件，但那些和那些只是不起作用。我尝试使用href和routerLink，但没有一个工作。但是，当我检查页面并手动点击href中的链接时，它可以工作。

这里的链接是“product / {{categ.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 },

尝试交换订单。

另一个问题可能是您链接中的{{categ.id}}正在解析为“”，在这种情况下，没有任何内容可以匹配。