Я создал компонент Tabs, используемый следующим образом ( Онлайн пример )
<tabs>
<tab title="tab 1" active="true">Content 1</tab>
<tab title="tab 2">Content 2</tab>
</tabs>
HTML-код компонента 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>
Как сделать ленивымзагрузить содержимое каждой вкладки (загрузить, когда вкладка станет активной)?
Код компонента вкладок:
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);
}
}
А код компонента вкладки:
export class TabComponent {
@Input() active: boolean;
@Input() title: string;
}