1

我正在使用 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，但是当我点击链接时没有任何反应。不过，如果我在搜索栏中手动编写链接，它仍然可以工作。

预先感谢您的帮助。

4

1 回答 1

0

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

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

之前会匹配

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

换个顺序试试。

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

于 2019-05-01T22:07:56.603 回答