Angular 2延迟加载选项卡内容

Question

我有一组选项卡，希望其中几个选项卡可以“急切地”加载，而另外几个则可以“懒惰地”加载。例如，如果我有两个选项卡，Tab1的内容应该急切地加载，而Tab2的内容应该懒惰地加载。

我参考了this的好例子。

<tab tabTitle="Tab 2" lazyload="true">Something like this</tab>

如何在点击选项卡时延迟加载选项卡内容，而不是隐藏已加载的内容？

- Sachin

---

你可以考虑使用路由器或者这个，因为它支持惰性路由 http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0 - TGH

这是一个嵌套组件的情况，我想要延迟加载子组件。 - Sachin

*ngIf可以帮助你。除非选项卡处于活动状态，否则可以延迟Dom加载。 - Chandermani

Answer 1

我不太清楚您想要实现什么，以及“懒加载”对您来说意味着什么...您是否想在显示选项卡之前异步加载数据？正如@TGH所述，路由是一个非常好的功能，您应该考虑使用它，特别是它的@CanActivate装饰器：

• https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

您可以考虑使用与Observable对应的load属性。后者将等待可观察对象异步接收事件以进行显示。

以下是您应用程序组件的新内容：

@Component({
  selector: 'my-app',
  template: `
    <tabs>
      <tab [tabTitle]="'Tab 1'" [load]="tabLoader">Tab 1 Content</tab>
      <tab tabTitle="Tab 2">Tab 2 Content</tab>
    </tabs>
  `,
  directives: [Tabs, Tab]
})
export class App {
  constructor() {
    this.name = 'Angular2';
    this.tabLoader = Observable.create((observer) => {
      setTimeout(() => {
        observer.next();
      }, 1000);
    });
  }
}

而在 Tabs 组件中的更新：

@Component({
  (...)
})
export class Tabs implements AfterContentInit {
  (...)

  displayTab(tab) {
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    tab.active = true;
  }

  selectTab(tab: Tab) {
    if (tab.load) {
      tab.load.subscribe(() => {
        this.displayTab(tab);
      });
    } else {
      this.displayTab(tab);
    }
  }
}

这里是相应的 plunkr： https://plnkr.co/edit/d54CzKLrJirjkA6TDBC0?p=preview。

希望能对您有所帮助， Thierry

- Thierry Templier

Answer 2

我使用了Chandermani的建议，并使用选择函数设置了多个布尔值来设置选项卡。我正在使用ngx-bootstrap进行选项卡的设置。然后，我使用*ngIf打开（并加载）选项卡内容：

 import { TabsModule } from 'ngx-bootstrap';

在组件中...

 tab2Loaded: boolean = false;
 getTab2() { 
    this.tab2Loaded= true; 
 }

在模板中...

<tab heading="tab2" (select)="getTab2()">
    <div *ngIf="tab2Loaded" class="container-fluid">
        <div class="row">
               ....etc
        </div> 
    </div> 
</tab>

似乎在Angular 4中运行良好，当然您需要弄清楚何时想要加载数据。如果您也想进行懒加载，请创建一个组件，将其传递给一个id，该id获取其自己的数据。

- davaus