mat-tab惰性加载选项卡只有一次

Question

我使用的是角质垫标签，它被设置为惰性加载标签内容。

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

我发现，当我在选项卡之间重复导航时，第二个选项卡的内容每次都是新加载的。我有一个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>

Answer 1

使用mat-tab- 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

Answer 2

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

如 let data = undefined;

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

data = Response

3.只有在data === undefined的情况下才调用接口

我希望这能为你工作。

Answer 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