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

Question

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

这里的link是“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，但是当我点击 link 时没有任何反应。如果我在搜索栏中手动写入 link，它仍然有效。

预先感谢您的帮助。

Answer 1

无需过多研究，它看起来像：

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

将在

之前匹配

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

尝试调换顺序。

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

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

My submenu's href and routerlink doesn't work but other links in the project works fine

href

angular

angular-routerlink

angular7