Angular 2懒加载标签内容

我有一组选项卡，我想要一些标签来'加载'加载，很少加载'懒惰'。例如，如果我有2个选项卡，则应急加载Tab1的内容，并且应该懒惰地加载Tab2的内容。Angular 2懒加载标签内容

我跟着this很好的例子

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

如何Lazyload上点击选项卡，而不是隐藏加载的内容标签内容？

来源

2016-02-02 Sachin

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

这是一个嵌套组件的情况，我想懒加载孩子零件。 – Sachin

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

我真的不知道你要实现什么，什么样的“懒加载”对你来说意味着什么...你想在显示标签之前异步加载数据吗？作为@TGH指出，路由是一个伟大的功能，你应该考虑的，特别是其@CanActivate装饰：

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

你可以考虑使用对应于一个Observable一个load属性。后者将等待观察者异步接收事件进行显示。

这里是您的应用程序组件的新内容：Tabs组件内

@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); 
    }); 
    } 
}

而且更新：

@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。

希望它可以帮助你，蒂埃里

来源

2016-02-02 10:45:42

我用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的组件，该组件获取它自己的数据。

来源

2017-10-27 02:40:33 davaus

Angular 2懒加载标签内容

回答

相关问题