Angular 4 Material 标签在标签上加载 Select

Question

是否可以在Angular Material Tabs 上实现延迟加载？否则我需要一种方法来运行进入标签时的方法。

Answer 1

如文档所述

While <md-tab-group> is used to switch between views within a single route, <nav md-tab-nav-bar> provides a tab-like UI for navigating between routes.

通过使用此方法，您可以使每个选项卡单独路由，因此每次激活路由时都会加载每个页面。

<nav md-tab-nav-bar>
  <a md-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{tabLink.label}}
  </a>
</nav>

<router-outlet></router-outlet>

请在 选项卡和导航 部分下找到更多信息 here。

Answer 2

您可以使用 <md-tab-group> 提供的 selectChange 事件。它在选项卡选择更改时触发。来自 documentation：

@Output() selectChange : Event emitted when the tab selection has changed.

在您的模板中：

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load some morecontents after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>

... 在您的打字稿代码中：

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}

Link 到 working demo。

Answer 3

我知道问题是关于 angular-material 5.x.x，但是对于那些来到这里但没有注意的人来说，angular-material 6 原生支持延迟加载选项卡内容 https://material.angular.io/components/tabs/overview#lazy-loading.

Answer 4

根据Angular Material Documentation：

延迟加载

默认情况下，标签内容是预先加载的。急切加载的选项卡将初始化子组件，但不会将它们注入 DOM，直到选项卡被激活。

如果选项卡包含多个复杂的子组件或选项卡的内容在初始化期间依赖DOM计算，建议延迟加载选项卡的内容。

通过在带有 matTabContent 属性的 ng-template 中声明正文，可以延迟加载标签内容。

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      The Second Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

Angular 4 Material 标签在标签上加载 Select

Angular 4 Material Tabs Load on Tab Select

angular-material

angular-material2

angular