角材料选项卡延迟加载 [英] Angular Material Tabs Lazy Load

问题描述

我最近开始使用AngularJS，但是在使用md-tabs时遇到了一个问题(https://material.angularjs.org/latest/demo/tabs ).

I have recently started using AngularJS but I have run into a problem when using md-tabs (https://material.angularjs.org/latest/demo/tabs).

在我的页面上，我有几个标签，并且通过ng-repeat在每个标签中放置了大约30张图像.问题是打开页面需要花费很长时间时，所有选项卡中的所有图像都正在加载.我希望打开页面时仅加载第一个(活动)标签的内容，而所有其他标签的内容仅在它们变为活动状态时加载.

On my page, I have several tabs and there are approaximately 30 images placed in each tab via ng-repeat. The problem is that all of the images in all of the tabs are loading when the page is opened which is taking a long time. I would prefer if only the content of the first (active) tab was loaded when the page is opened and that the content of all the other tabs is only loaded as they become active.

这是我的标签代码:

<md-content>
    <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
        <md-tab label="Tab One">
            <md-content class="md-padding">
                <div ng-repeat="fruit in Fruits">
                    <img ng-src="images/{{ fruit.FruitId }}.png">
                    <h4>{{ fruit.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Two">
            <md-content class="md-padding">
                <div ng-repeat="veg in Vegetable">
                    <img ng-src="images/{{ veg.VegId }}.png">
                    <h4>{{ veg.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Three">
            <md-content class="md-padding">
                <div ng-repeat="animal in Animals">
                    <img ng-src="images/{{ animal.AnimalId }}.png">
                    <h4>{{ animal.Name }}</h4>
                </div>
            </md-content>
        </md-tab>
    </md-tabs>
</md-content>

所以本质上我想做的是延迟加载"每个选项卡的内容，以便仅在选择了相关的选项卡时才加载内容.

So essentially what i want to do is 'lazy load' the content of each tab so that the content is only loaded when the relevant tab is selected.

由于我刚开始接触Angular，所以我不确定该如何处理.我注意到它已被突出显示为一个问题( https://github.com/angular/material/issues/5500 )，但尚未提供解决方案.

As I am quite new to Angular, I am unsure of how to approach this. I notice that it has been highlighted as an issue (https://github.com/angular/material/issues/5500) but a solution has yet to be provided.

我当时想结合使用ng-if和ng-include将内容动态添加到所选标签中，但是我真的不知道从哪里开始使用这种方法.

I was thinking of using a combination of ng-if and ng-include to add the content to the chosen tab dynamically but I don't really know where to start with this approach.

任何帮助将不胜感激

推荐答案

一种简单的实现方式是，第一次选择选项卡时将标志设置为true，然后等待构建内容DOM，直到标志为true.您必须这样做:

A simple way of doing it would be setting a flag to true the first time a tab gets selected and waiting with building the content DOM until the flag is true. You would have to do it like this:

• 在标签上使用 md-on-select =":: tabXXDisplayed = true" 将变量在首次显示时设置为true( :: 使表达式一次表达)
• 在标签内容上使用 ng-if ="tabXXDisplayed"

• Use md-on-select="::tabXXDisplayed=true" on the tab to set a variable to true on first display (the :: make the expression a one-time-expression)
• Use ng-if="tabXXDisplayed" on the tab content

以下是示例片段:

<md-tab md-on-select="::tabXXDisplayed = true">
    <md-tab-label>tabXX</md-tab-label>' +
    <md-tab-body>
      <div ng-if="tabXXDisplayed">
        // your content for tabXX here
      </div>
    </md-tab-body>
  </md-tab>

这篇关于角材料选项卡延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！