Для активации ссылки требуется двойной щелчок - как сделать так, чтобы она была только одна?Угловой 5

Question

Я создаю приложение на Angular 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

Это означает, что распространение начинается от ребенка (подсказка) к родителям, пока не достигнет корневого узла (при условии, что у вас будет прослушиватель для всех родителей до корня).