PrimeNG TabView - 基于 URL 打开选项卡

Question

我正在为一组选项卡使用 PrimeNG 的 TabView 组件 - 主页、约会、订单。

约会和订单选项卡有一个 link 列表，可导航到各个约会或订单，这些页面是分开的 routes/pages，它们不会在选项卡中打开。

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

对于这两个问题，似乎要放置一个 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>

Answer 1

概念

使用 ActivatedRoute 检索 tab 的查询参数。
通过比较参数tab和tabView.tabs的headerName得到tab索引。
给[(activeIndex)]赋值(2)中的tab索引。

解决方案

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

PrimeNG TabView - 基于 URL 打开选项卡

PrimeNG TabView - Open Tab based on URL

angular

primeng

angular-routing

angular11

概念

解决方案

参考资料