Angular 2 Lazy load Содержимое вкладки

Question

У меня есть набор вкладок, и я хочу несколько вкладок, чтобы загружать «с нетерпением» и немного, чтобы загрузить «lazyily». Например, если у меня есть 2 вкладки, содержимое Tab1 должно быть загружено с нетерпением, а содержимое Tab2 должно загружаться лениво.

Я последовал this хороший пример

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

Как LazyLoad содержимое вкладки по нажатию на вкладку вместо сокрытия загруженного контента?

Answer 1

Я действительно не знаю, что вы хотите реализовать и что означает «ленивая загрузка» ... Вы хотите загружать данные асинхронно перед отображением вкладки? Как указано @TGH, маршрутизация это отличная возможность, вы должны рассмотреть, особенно его @CanActivate декоратор:

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

Вы могли бы рассмотреть возможность использовать атрибут load, что соответствует Observable. Последний будет ожидать, что наблюдаемые будут получать асинхронные события для отображения.

Вот новое содержание компонента приложения:

@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

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, хотя, конечно, вам нужно будет выяснить, когда вы хотите загрузить данные. Если вы хотите ленить загрузить его, сделайте компонент, с которым вы передаете идентификатор, который получает свои собственные данные.