路由器导航到 ngx-bootstrap 选项卡 Angular 4

Question

我有一个包含四个选项卡的组件（使用 ngx-bootstrap 选项卡）myprod、mysettings 等。我为每个选项卡创建了四个不同的路由（指向同一个组件）。我使用下面的代码在页面加载时显示正确的选项卡。

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

但不幸的是每次 active class 都会添加到第一个选项卡而不是正确的选项卡。如果我使用任何其他 class 名称而不是 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标签上使用禁用的属性并且初始值设置为true但后来被更改，它将关闭select事件的触发器，这将使标签不显示为 selected.
如果您在选项卡标签上使用 *ngIf，如果您隐藏一个选项卡然后再显示它（一种 FIFO 行为），选项卡的顺序可能会全部搞砸。

Answer 3

这就是您如何以编程方式通过路由更改选项卡

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)
  }

路由器导航到 ngx-bootstrap 选项卡 Angular 4

Router Navigate to ngx-bootstrap tabs Angular 4

angular-routing

ngx-bootstrap

angular

这就是您如何以编程方式通过路由更改选项卡