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

【问题标题】：Router Navigate to ngx-bootstrap tabs Angular 4路由器导航到 ngx-bootstrap 选项卡 Angular 4
【发布时间】：2020-11-06 16:12:49
【问题描述】：

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

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

但不幸的是，每次 active 类都会添加到第一个标签而不是正确的标签。如果我使用任何其他类名而不是 active 它会按预期工作，请帮助。

【问题讨论】：

标签： angular angular-routing ngx-bootstrap

【解决方案1】：

试试这个

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

【讨论】：

已添加，但仍显示第一个标签而不是第三个
您是否将它们添加到元素中？可以给我看看html吗
我在我的问题中添加了屏幕截图，当用户访问“我的设置”网址时，我想在设置选项卡上激活
如上例，从tab中删除[routerLink]，添加到tab里面的元素中
并删除 [routerLinkActiveOptions]="{exact:true}"

【解决方案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 行为）。

【讨论】：

【解决方案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)
  }

【讨论】：