PrimeNG TabView - 基于 URL 打开选项卡答案

【问题标题】：PrimeNG TabView - Open Tab based on URLPrimeNG TabView - 基于 URL 打开选项卡
【发布时间】：2021-08-20 12:38:40
【问题描述】：

我将 PrimeNG 的 TabView 组件用于一组选项卡 - 主页、约会、订单。

约会和订单选项卡有一个链接列表，可以导航到个人约会或订单，这些页面是单独的路线/页面，它们不会在选项卡中打开。

第一个问题是当用户点击后退按钮时，默认情况下他们会被带到主页选项卡，这是第一个选项卡。第二个问题，我们需要让用户可以直接分享到约会标签或订单标签的链接。

对于这两个问题，似乎放置一个 URL id -“app/main#home”或“app/main#appointments”或查询参数：“app/main?tab=home”，“app/main? tab=appointments" 会很好吗？

我不确定 ID 选项的位置，查询参数听起来更可行 - 使用路由定义并以编程方式在 ngOnInit 中选择索引。

PrimeNG 是否为此提供了现成的东西？

编辑：在 PrimeNG 11.4.4 中使用 Angular 11

<p-tabView>
  <p-tabPanel header="Home">
    Summary
  </p-tabPanel>
  <p-tabPanel header="Appointments">
    <ng-template pTemplate="content">
      Table with Appointments - links take to Appointment details page.
    </ng-template>
  </p-tabPanel>
  <p-tabPanel header="Orders">
    <ng-template pTemplate="content">
      Table with Appointments - links take to Order details page.
    </ng-template>
  </p-tabPanel>
</p-tabView>

【问题讨论】：

标签： angular primeng angular-routing angular11

【解决方案1】：

概念

使用ActivatedRoute 检索tab 的查询参数。
通过比较参数tab 和tabView.tabs 的headerName 来获取标签索引。
将[(activeIndex)] 分配给(2) 中的标签索引。

解决方案

main.component.html

<p-tabView #tabView 
  (onChange)="onChange($event)" 
  [(activeIndex)]="selectedTabIndex">
  ...
</p-tabView>

main.component.ts

import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ViewChild
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TabView } from 'primeng/tabview';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements AfterViewInit {
  selectedTabIndex: number = 0;

  @ViewChild('tabView') tabView!: TabView;

  constructor(private route: ActivatedRoute, private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.route.queryParams.subscribe(params => {
      this.selectedTabIndex = this.getTabIndex(params['tab']);

      this.cdr.detectChanges();
    });
  }

  getTabIndex(tabName: string): number {
    // Default tab: 0 when tabName is null or undefined
    if (!tabName) return 0;

    let selectedIndex = this.tabView.tabs.findIndex(
      x => x.header.toLowerCase() === tabName.toLowerCase()
    );

    if (selectedIndex > -1) return selectedIndex;

    // Default tab: 0 when tabName is not exist
    return 0;
  }

  onChange(event) {
    this.selectedTabIndex = event.index;
  }
}

Sample Solution on StackBlitz

参考文献

PrimeNG TabView

【讨论】：