时间戳

首页 > 解决方案 > Angular 6：从组件单击会导致 href 值添加到 URL

angular - Angular 6：从组件单击会导致 href 值添加到 URL

问题描述

我是 Angular 的新手，遇到了以下问题：

我有一个标签式 UI

我的链接：

<li>
  <a href="#referrals" id="tab-opinions" data-toggle="tab" target="_self" #referrals> 
   <span class="visible-xs"><i class="fa fa-home"></i></span>
   <span class="hidden-xs">Referrals</span> 
  </a>
</li>
<li>
  <a href="#opinions" id="tab-opinions" data-toggle="tab" target="_self" #opinions> 
   <span class="visible-xs"><i class="fa fa-home"></i></span>
   <span class="hidden-xs">Opinions</span> 
  </a>
</li>

对应标签内容：

<div class="tab-pane" id="referrals">
     <referral-list [data]="data"></referral-list>
</div>
<div class="tab-pane" id="opinions">
     <doctor-opinion-list [data]="data"></doctor-opinion-list>
</div>

在我的组件中：

@ViewChild("opinions") private opinions;
@ViewChild("referrals") private referrals;

...
...

/* Highlights a particular tab with given id */
highlightTab(tabId) {
  if (["referrals"].indexOf(tabId) > -1) {
    this.referrals.nativeElement.click();
  } else if (["opinions"].indexOf(tabId) > -1) {
    this.opinions.nativeElement.click();
  }
}

当前网址是：

/dashboard/patient/view/1

如果我单击选项卡本身，一切正常。但是如果我使用这样的语句：

highlightTab('referrals');

它将 URL 更改为：

http://localhost:4200/#referrals

我在这里做错了什么？还需要什么代码吗？

标签： angular

解决方案

你不应该使用 href 它将重新加载页面使用片段并确保在 routerModule 中启用锚滚动

路由器模块.ts

RouterModule.forRoot(routes, {        
      anchorScrolling: 'enabled'
    })

组件.html

<li>
  <a  [fragment]="'referrals'" id="tab-opinions" data-toggle="tab" target="_self" #referrals> 
   <span class="visible-xs"><i class="fa fa-home"></i></span>
   <span class="hidden-xs">Referrals</span> 
  </a>
</li>
<li>
  <a [fragment]="'opinions'" id="tab-opinions" data-toggle="tab" target="_self" #opinions> 
   <span class="visible-xs"><i class="fa fa-home"></i></span>
   <span class="hidden-xs">Opinions</span> 
  </a>
</li>

注入 Router 并使用 navigate 方法在路由之间导航，而不是使用 ViewChild

constructor( private router: Router ) {}
}
highlightTab(tabId) {
  if (["referrals"].indexOf(tabId) > -1) {
    this.router.navigate( [ 'path name' ], { fragment: 'referrals' } )
  } else if (["opinions"].indexOf(tabId) > -1) {
    this.router.navigate( [ 'path name' ], { fragment: 'opinions' } )
  }
}

推荐阅读