链接采取双击激活-如何使它只有一个？角5

Question

我正在构建一个应用程序的角5，并有一个导航组件，将显示各种标签/链接。当链接处于活动状态(当前正在被查看)时，选项卡将在其周围有一个边框，看起来就像是文件文件夹的前端。

问题是，我只需要单击一次就可以使链接显示为活动，但必须单击选项卡/文本两次才能使其真正加载页面。为什么是这样，怎么才能让它在一次点击后完全加载呢？这是因为我在一个链接上激活了两个单击事件吗？

在html中我的选项卡：

 <div *ngIf="authService.current_route == '/' ">
        <a [routerLink]="['']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 0" (click)="changeroute()" (click)="selectTab(0)" >Site List</li>
        </a>
        <a [routerLink]="['/sites/map']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 1" (click)="changeroute()" (click)="selectTab(1)" >All Sites Map</li>
        </a>
        <a [routerLink]="['/user-access']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 2" (click)="changeroute()" (click)="selectTab(2)" >User Access</li>
        </a>
  </div>

在我的部分：

export class NavigationComponent implements OnInit {
   deciding_route: any;
   selectedTab = 0;
   current_site;
   local_route
   current_site_id

selectTab(tabId: number) {
    this.selectedTab = tabId;
 }
constructor(public authService: AuthService, private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
}

changeroute() {
   this.authService.current_route = this.router.url;
   this.authService.route_with_id = this.authService.current_route
}

}

太感谢了！！如果我能澄清什么，请告诉我。

Answer 1

问题可能与以下事实有关:在路由器实际更改路由之前，单击将触发，然后，调用您的方法changeroute();不会更改任何内容，因为此时路由仍然相同；但是，当您单击第二次时，路由已经更改，在第一个单击处理程序之后，因此它根据预期的路由进行更改。

解决方法之一是将changeroute()方法传输到路由更改侦听器：

constructor(private router: Router) {
  router.changes.subscribe((val) => { this.changeroute(); })
}

您还可以将单击处理程序向上移动，即移动到一个元素，该元素将是routerLink的父元素，以便在单击链接后进行单击，它可能也能工作。

进一步解释

考虑以下构成部分：

@Component({
  selector: 'my-test',
  template: `
    <div (click)="onClick1()">
      <button (click)="onClick2()">Click</button>
    </div>`,
})
export class TestComponent  {
  onClick1(){
    console.log('click 1')
  }  
  onClick2(){
    console.log('click 2')
  }
}

如果单击该按钮，它将显示控制台，如下所示：

click 2    
click 1

这意味着从子节点(提示)开始向父母传播，直到到达根节点为止(前提是在根节点之前，您将为所有父母提供侦听器)。