Angular Material Tabs 延迟加载 [英] Angular Material Tabs Lazy Load

问题描述

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

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

这是我的标签代码:

<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="水果中的水果"><img ng-src="images/{{fruit.FruitId }}.png"><h4>{{fruit.Name }}</h4>

</md-content></md-tab><md-tab label="标签二"><md-content class="md-padding"><div ng-repeat="蔬菜中的蔬菜"><img ng-src="images/{{ veg.VegId }}.png"><h4>{{ veg.Name }}</h4>

</md-content></md-tab><md-tab label="标签三"><md-content class="md-padding"><div ng-repeat="动物中的动物"><img ng-src="images/{{animal.AnimalId }}.png"><h4>{{animal.Name }}</h4>

</md-content></md-tab></md-tabs></md-content>

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

由于我对 Angular 很陌生，我不确定如何解决这个问题.我注意到它已被突出显示为一个问题(https://github.com/angular/material/issues/5500) 但尚未提供解决方案.

我正在考虑使用 ng-if 和 ng-include 的组合来动态地将内容添加到所选选项卡中，但我真的不知道从哪里开始使用这种方法.

任何帮助将不胜感激

解决方案

一种简单的方法是在第一次选择选项卡时将标志设置为 true，并等待构建内容 DOM，直到该标志为 true.你必须这样做:

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

这是一个示例代码片段:

<md-tab-label>tabXX</md-tab-label>'+<md-tab-body><div ng-if="tabXXDisplayed">//这里是 tabXX 的内容

</md-tab-body></md-tab>

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

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.

Here is my code for the tabs:

<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.

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.

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.

Any help would be greatly appreciated

解决方案

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:

• 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

Here is an example snipplet:

<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>

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