lazy-loading - Angular 2延迟加载选项卡内容

Question

我有一组选项卡，我想要一些选项卡“急切地”加载，而一些选项卡“懒惰地”加载。例如，如果我有 2 个选项卡，Tab1 的内容应该急切加载，Tab2 的内容应该延迟加载。

我关注了this很好的例子

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

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

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 .

希望对你有帮助，蒂埃里