Angular

Question

我正在尝试创建一个类似于浏览器选项卡的选项卡栏。每个选项卡加载一个模块。我正在尝试 mat-tab-nav-bar。打开一个新选项卡并将其设置为活动状态以及在选项卡之间来回切换都可以正常工作。关闭选项卡有效并且选项卡从数组中删除。不幸的是，我无法再次激活之前打开的选项卡或关闭的选项卡旁边的选项卡并加载模块。我将最后加载的活动页面放入 sessionStorage 并在 ngOnInit() 函数中重新加载后加载此页面。

Angular 和 TypeScript 对我来说还是新手，我还没有获得太多经验。

我以这个例子为模板。我也尝试过这个例子，但我无法加载任何模块，并且使用 mat-tab-nab-bar 它工作正常。 https://stackblitz.com/edit/angular-zzehu6?file=src%2Fapp%2Ftab-group-dynamic-example.html

如果要删除选项卡，则会触发onRemoveTab() 事件。我在选项卡上循环，一旦找到要删除的选项卡，我就将其从 Tabs 数组中删除，并将 FormControler 中的前一个选项卡设置为活动（或尝试将其设置为活动）。我还将此选项卡保存在 sessionStorage 中。结果是只有删除的选项卡被移除，但之前的选项卡没有设置为活动的，模块也没有重新加载。我怎样才能做到这一点？有人有想法吗？

这是我的代码。如果您需要更多信息，请告诉我。

tabbar.component.html

<div *ngIf="currentTab">
  <nav mat-tab-nav-bar>
    <a
      mat-tab-link
      *ngFor="let tab of tabs; let index = index"
      [routerLink]="tab.link"
      routerLinkActive="false"
      #rla="routerLinkActive"
      [active]="rla.isActive"
      (click)="onSelect(tab, index)"
      disableRipple
    >
      {{tab.name}}
      <button 
        mat-icon-button 
        (click)="onRemoveTab(tab.id, index)" 
        [disabled]="tabs.length === 1"
      >
        <mat-icon style="transform: scale(0.8);">close</mat-icon>
      </button>
    </a>
  </nav>
</div>

<div class="content">
  <ng-content></ng-content>
</div>

tabbar.component.ts

import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

import { SidenavRouteInterface } from './data';

@Component({
  selector: 'tabbar',
  templateUrl: './tabbar.component.html', 
})
export class TabbarComponent implements OnChanges, OnInit {
  selected = new FormControl(0);
  tabs: SidenavRouteInterface[] = [];
  sessionKey = 'currentTab';
  previousTab: SidenavRouteInterface | undefined;
  

  onSelect(router: SidenavRouteInterface, index: number) {
    sessionStorage.setItem(this.sessionKey, JSON.stringify(router));
    this.selected.setValue(router.id);
  }

  onRemoveTab(tabId: number, index: number) {
    this.tabs.forEach((tab) => {
      if (tab.id === tabId) {
        this.tabs.splice(index, 1);
        this.selected.setValue(this.previousTab?.id);

        sessionStorage.setItem(this.sessionKey, JSON.stringify(this.previousTab));
      } else {
        this.previousTab = tab;
      }
    });

    return false;
  }
}

sidenav-route.model.ts

export interface SidenavRouteInterface {
  id: number;
  name: string;
  link: string;
  icon?: string;
}

数组中选项卡的外观示例。

tabs: SidenavRouteInterface[] = [
  { id: 6, name: 'Document', link: 'document' },
  { id: 7, name: 'Reference', link: 'reference' },
];

结果：

Answer 1

this.router.navigate([this.previousTab.link]) 成功了。

onRemoveTab(tabId: number, index: number) {
  this.tabs.forEach((tab) => {
    if (tab.id === tabId) {
      this.tabs.splice(index, 1);
      this.selected.setValue(this.previousTab?.id);
      this.router.navigate([this.previousTab.link]);

      sessionStorage.setItem(this.sessionKey, JSON.stringify(this.previousTab));
    } else {
      this.previousTab = tab;
    }
  });

  return false;
}

Angular - 在选项卡关闭后设置 mat-tab-link 活动

Angular - Set a mat-tab-link active after a tab is closed

tabs

typescript

angular-material

mat-tab