如何从另一个选项卡启用材料选项卡答案

【问题标题】：How to enable Material tab from another tab如何从另一个选项卡启用材料选项卡
【发布时间】：2019-12-31 11:32:49
【问题描述】：

我的标签定义

this.tabLinks = [
      { label: 'NEW', link: 'crud' },
      { label: 'SEARCH', link: 'search' },
      {
        label: 'MEDIA',
        link: 'media',
        disabled: true,
      },
    ];

标签 HTML

<nav mat-tab-nav-bar>
        <a
          mat-tab-link
          *ngFor="let tabLink of tabLinks; let i = index"
          [routerLink]="tabLink.link"
          routerLinkActive
          #rla="routerLinkActive"
          [active]="rla.isActive"
          [disabled]="tabLink.disabled"
        >
          {{ tabLink.label }}
        </a>
      </nav>

最初我的Media Tab 被禁用。如何从New tab 内部启用我的Media Tab？

【问题讨论】：

标签： angular angular-material angular-material-6 angular-material-5 angular-material-7

【解决方案1】：

如果您使用的是 NGRX 或 NGXS 之类的状态管理系统，那么我会保留管理选项卡的启用状态，并提供一个操作来允许更改状态。

然后，您可以在另一个选项卡的某个位置将该操作触发到商店以启用该状态。

如果您没有使用 NGRX、NGXS 或任何其他工具来管理状态，那么您可以创建一个包含一个或多个选项卡状态的服务，并在显示选项卡的组件和要启用选项卡的组件。

@Injectable({providedIn: 'root'})
export class TabLinks {

  private initialState = [
    { label: 'NEW', link: 'crud' },
    { label: 'SEARCH', link: 'search' },
    {
      label: 'MEDIA',
      link: 'media',
      disabled: true,
    }];

   private subject = new BehavourSubject(initialState);

   tabLinks$ = this.subject.asObservable();

   enableMediaTab() {
     this.subject.next(
       [...this.subject.value.map(x => x.link === "media" ? {...x, disabled: false} : x] 
     );
   }

}

现在您可以将其注入您的标签页。使用 async 管道解开 observable。

    <a
      mat-tab-link
      *ngFor="let tabLink of tabService.tabLinks$ | async; let i = index"
      [routerLink]="tabLink.link"
      routerLinkActive
      #rla="routerLinkActive"
      [active]="rla.isActive"
      [disabled]="tabLink.disabled"
    >

【讨论】：