mat-tab 延迟加载选项卡仅一次答案

【问题标题】：mat-tab lazy load tab only oncemat-tab 延迟加载选项卡仅一次
【发布时间】：2018-10-10 15:54:57
【问题描述】：

我正在使用 Angular Material mat-tab，它被设置为延迟加载标签内容。

由于默认加载第一个选项卡，我将第二个选项卡设置为延迟加载。

我发现，当我在标签之间反复导航时，第二个标签的内容每次都会重新加载。我有一个 Web API 调用来获取数据并显示在标签内容中。

所以我想避免每次选择选项卡时调用 Web API。我怎样才能做到这一点？

<mat-tab-group>
  <!--Roles Tab-->
  <mat-tab class="tabLabel" label="Roles">
    <app-roles></app-roles>
  </mat-tab>
  <!--Admins Tab-->
  <mat-tab class="tabLabel" label="Admins">
    <!-- Lazy load below component -->
    <ng-template matTabContent>
      <app-admins></app-admins>
    </ng-template>
  </mat-tab>
</mat-tab-group>

【问题讨论】：

标签： angular angular-material angular6

【解决方案1】：

在 mat-tab-group 上使用事件 selectedIndexChange 并将您的内容放入带有 ngIf 的 div 中，如下所示：

<mat-tab-group (selectedIndexChange)="tabChange($event)">
  <mat-tab label="Today">
    <ng-template matTabContent>
    <hello name="{{ name }}"></hello>
    </ng-template>
  </mat-tab>
   <mat-tab label="Yesterday">
     <div *ngIf="yesterDayTabShow">
    <hello name="Test"></hello>
     </div>
  </mat-tab>
</mat-tab-group>

查看链接： https://stackblitz.com/edit/angular-tu7jsg

【讨论】：

正是我想要的！
第二个标签没有通过延迟加载加载。 matTabContent 应用于此解决方案中的第一个选项卡。如果你在 app.component.html 中添加这一行：两个：第一个选项卡会删除内容，因为它会在点击时重新加载。我知道这是他正在寻找的解决方案，但我需要在第一次单击时延迟加载所有选项卡（以便在第一次延迟加载后将内容保留在所有选项卡中。

【解决方案2】：

1.在你的ts文件中声明空变量

例如。 let data = undefined;

2. 将您的 Api 数据存储在声明的变量中

data = Response

3.仅在data === undefined时调用API

我希望这对你有用。

【讨论】：

嗨 Swapnil，感谢您的建议。但这对我不起作用。每次单击选项卡时，数据都是未定义的。它没有维护数据值。

【解决方案3】：

您需要将组件创建为延迟加载包装器

<ng-container></ng-container>
<ng-container [ngTemplateOutlet]="contentTemplate" *ngIf="loadContent"></ng-container>

@Component({
  selector: 'cmp-lazy-load-container',
  templateUrl: './lazy-load-container.component.html',
  styleUrls: ['./lazy-load-container.component.css'],
})
export class LazyLoadContainerComponent implements AfterContentChecked {
  constructor(private elRef: ElementRef) {}

  @ContentChild('body', { static: true })
  contentTemplate: TemplateRef<ElementRef>;

  loadContent: boolean;
  ngAfterContentChecked() {
    if (this.elRef.nativeElement.offsetParent) this.loadContent = true;
  }
}

使用它：

<mat-tab-group>
  <mat-tab label="First"> 
    <cmp-lazy-load-container>
      <ng-template #body>
       What ever you wish to be lazy loaded here...
      </ng-template>
    </cmp-lazy-load-container>
  </mat-tab>
  <mat-tab label="Second"> 
    <cmp-lazy-load-container>
      <ng-template #body>
       What ever else you wish to be lazy loaded here...
      </ng-template>
    </cmp-lazy-load-container>  
  </mat-tab>
</mat-tab-group>

cmp-lazy-load-container 仅在 #body 模板中的内容可见时初始化一次。

而且这个惰性组件也可以用在其他地方。

这里有一个工作示例：https://angular-ivy-avqx3u.stackblitz.io

【讨论】：