Маршрутизатор Перейдите на вкладки ngx-bootstrap Angular 4

попробуй это

 <tab   
  [routerLink]="['/user/my-account']"
  routerLinkActive 
  #ads="routerLinkActive"
  [active]="ads.isActive">  
</tab>

Вид позднего ответа, но для будущих людей ищут:

HTML:

  <tabset class="nav nav-tabs">
    <ng-container *ngFor="let template of templates">
      <tab #tab="routerLinkActive" 
           (selectTab)="(!template.disabled || firstSelection) && routeChange(template.appRouterLink)"
           [active]="tab.isActive" 
           [customClass]="template.disabled && template.hideDisabled ?
            'd-none' : template.disabled ? 'disabled' : ''" 
           [heading]="template.labelKey | translate"
           [routerLink]="template.appRouterLink" 
           routerLinkActive="active">
      </tab>
    </ng-container>
  </tabset>

  <div class="tab-content">
    <div class="tab-pane active">
      <router-outlet></router-outlet>
    </div>
  </div>

TS:

  @ContentChildren(TabsDirective) public templates: QueryList<TabsDirective>;
  private firstSelection = true;

  public constructor(private router: Router, private route: ActivatedRoute) {
  }

  public async routeChange(appRouterLink: any[] | string): Promise<any> {
    if (this.firstSelection) {
      this.firstSelection = false;

    } else {
      const route = appRouterLink instanceof Array ? appRouterLink : [appRouterLink];
      this.router.navigate(route, {relativeTo: this.route});
    }
  }

И директива:

@Directive({selector: '[appTabs]'})
export class TabsDirective {
  @Input() public disabled: boolean;
  @Input() public hideDisabled: boolean;
  @Input() public labelKey: string;
  @Input() public appRouterLink: any[] | string | null | undefined;
}

Пример использования:

 <app-nav>
   <ng-template [disabled]="!can_see_info" appRouterLink="info"
             appTabs labelKey="INFO"></ng-template>

   <ng-template [disabled]="!can_see_events || !company?.id" appRouterLink="events"
             appTabs labelKey="EVENTS"></ng-template>
 </app-nav>

Несколько замечаний о том, почему код такой:

• Если вы используете свойство disabled в теге вкладки и для начального значения установлено значение true, но позже оно будет изменено, он отклонит триггер события выбора, что приведет к тому, что вкладка не будет отображаться как выбранная.
• Если вы используете * ngIf в теге вкладок, порядок вкладок может быть испорчен, если вы скроете одну, а затем снова покажете ее (своего рода поведение FIFO).

Вот как вы можете программно изменять вкладки с маршрутизацией

component.html

<tabset>
    <tab *ngFor="let m of menu; let i = index" [active]="m.active" [heading]="m.title" (selectTab)="tabSelected(m.url)">
        <component-a *ngIf="i == 0"></component-a>
        <component-b *ngIf="i == 1"></component-b>
        <component-c *ngIf="i == 2"></component-c>
    </tab>
</tabset>

component.ts

  menu: Array<IMenu>
  constructor(private router: Router) { }

  ngOnInit(): void {
    this.initMenu()
    this.onPageLoad()
  }

  initMenu() {
    this.menu = [
      {
        title: 'Tab 1',
        url: '/tab-1',
        active: true   // default active tab
      },
      {
        title: 'Tab 2',
        url: '/tab-2',
        active: false
      },
      {
        title: 'Tab 3',
        url: '/tab-3',
        active: false
      }
    ]
  }

  // activate tab based on url when page loads
  onPageLoad() {
    this.menu.forEach(m => m.active = false)
    let _selected_menu = this.menu?.find(x => x.url.includes(this.router.url))

    if (_selected_menu) {
      _selected_menu.active = true
    }
  }

  // change url when user selects tab
  tabSelected(url: string) {
    this.router.navigateByUrl(url)
  }