Question

我创建了一个Tabs组件，其用法如下（Online example）

library(plotly)

d <- diamonds[sample(nrow(diamonds), 1000), ]

p <- ggplot(data = d, aes(x = carat, y = price)) +
geom_point(aes(text = paste("Clarity:", clarity)), size = 4) +
geom_smooth(aes(colour = cut, fill = cut)) + facet_wrap(~ cut)

“标签”组件HTML如下：

<tabs>
  <tab title="tab 1" active="true">Content 1</tab>
  <tab title="tab 2">Content 2</tab>
</tabs>

如何延迟加载每个Tab内容（在Tab处于活动状态时加载）？

Tabs组件代码为：

<div class="head">
  <ul class="tabs">
    <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
      <a>{{ tab.title }}</a>
    </li>
  </ul>
</div>
<ng-content></ng-content>

Tab组件代码为：

export class TabsComponent implements AfterContentInit {

  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  select(tab: TabComponent) {
    this.tabs.toArray().forEach(tab => tab.active = false);
    tab.active = true;
  }

  ngAfterContentInit() {

    let actives = this.tabs.filter((tab) => tab.active);

    if(actives.length === 0) 
      this.select(this.tabs.first);

  }

}

Answer 1

您必须使用常规路由，它们可能很懒。看一下物料标签，它们支持工艺路线。您可以重新实现他们的API。

https://material.angular.io/components/tabs/overview

延迟加载Angular组件的ng-content

1 个答案: