路由器導航到 ngx-bootstrap 選項卡 Angular 4

Question

我有一個帶有四個選項卡（使用 ngx-bootstrap 選項卡）myprod、mysettings 等的組件。 我為每個選項卡創建了四個不同的路由（指向相同的組件）。 我使用以下代碼在頁面加載時顯示正確的選項卡。

[routerLink]="['/user/my-account']" [routerLinkActive]="'active is-active'"

但不幸的是，每次活動類都會添加到第一個選項卡而不是正確的類。 如果我使用任何其他類名而不是active它按我的預期工作，請幫助。

Answer 1

試試這個

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

Answer 2

有點晚回復，但對於未來的人搜索：

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>

關於為什么代碼是這樣的幾個注釋：

• 如果您在 tab 標簽上使用 disabled 屬性並且初始值設置為 true 但后來更改，它將關閉 select 事件的觸發器，這將使選項卡不顯示為選中狀態。
• 如果你在 tab 標簽上使用 *ngIf ，如果你隱藏一個標簽然后再次顯示它（一種 FIFO 行為），標簽的順序可能會被搞砸。

Answer 3

這是您如何以編程方式通過路由進行選項卡更改

組件.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>

組件.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)
  }