时间戳

首页 > 解决方案 > 语法错误，无法识别的表达式：/service-details/1139#overview Angular 5

angular - 语法错误，无法识别的表达式：/service-details/1139#overview Angular 5

问题描述

我正在做简单的角度路由。它工作正常，但是当我希望客户端路由意味着使用导航选项卡在同一页面中移动时，它会引发错误。这是我的代码：

服务细节.component.html

 <ul class="asidemenu">
          <li><a [routerLink]="['/service-details',serviceId]" fragment="overview" (click)="onAnchorClick()" class="
              active"><span
                class="asidemenu-icon"><img src="assets/images/binoculars.svg" alt=""></span><span class="asidemenu-title">Overview</span></a></li>
          <li><a [routerLink]="['/service-details',serviceId]" fragment="review-analytics" (click)="onAnchorClick()"><span
                class="asidemenu-icon"><img src="assets/images/graph-analysis.svg" alt=""></span><span class="asidemenu-title">Sentiment</span></a></li>
          <li><a [routerLink]="['/service-details',serviceId]" fragment="expert-review" (click)="onAnchorClick()"><span
                class="asidemenu-icon"><img src="assets/images/review.svg" alt=""></span><span class="asidemenu-title">Expert
                Reviews</span></a></li>
    <ul>

<div id='overview'> Overview (Removed Original content)</div>
<div id='review-analytics'> Reviews (Removed Original content)</div>
<div id='expert-review'> Expert Reviews (Removed Original content)</div>

根据上面的代码，我可以在同一页面中自由移动，但Syntax error, unrecognized expression: /service-details/1139#overview每次都会出现此错误。

可能这是路由问题，那么如何解决？

先感谢您。

标签： angulartabsangular-routing

解决方案

您需要启用anchorScrolling导入的选项RouterModule

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ],
})
...

更多信息： https ://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

推荐阅读