angular - 我的子菜单的 href 和 routerlink 不起作用,但项目中的其他链接工作正常
问题描述
我正在使用 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,但是当我点击链接时没有任何反应。不过,如果我在搜索栏中手动编写链接,它仍然可以工作。
预先感谢您的帮助。
解决方案
无需过多研究,它看起来像:
{ path: ':categ/:id', component: PastriesComponent },
之前会匹配
{ path: 'product/:id', component: EclairComponent },
换个顺序试试。
另一个问题可能是链接中的 {{categ.id }} 解析为“”,在这种情况下,没有任何匹配项。
推荐阅读
- azure-devops - 如何在 Web 部署 zip 中包含我的配置转换文件?
- c++ - 为什么 G++ 不警告 Const 成员的未使用结果?
- ios - 每列都有最后一列的值。SQLITE 数据库
- webpack - 如何从捆绑包中排除一些 npm 包的文件夹(或文件)?
- docusignapi - 有没有办法在连接事件中包含模板角色名称
- c++ - 与从终端执行时相比,从 C 代码 system() 函数执行的 Linux 命令给出不同的结果
- c++ - 关于应用指针的问题,它使循环无限
- javascript - 如何使用 jquery/javascript 删除数组中的特定对象
- ios - 通过 iOS 中的 AVAssetReaderTrackOutput 获取样本缓冲区时音频丢失?
- python - tensorflow中的Logits在cpu中给出了nans,但在gpu中没有