perf(module: tabs&tabbar): change prerenderingSiblingsNumber to -1 by… (

#407)

components/tab-bar/doc/index.en-US.md

@@ -23,7 +23,7 @@ Properties | Descrition | Type | Default
 | unselectedTintColor       | unselected's font color  | String | '#888'           |
 | hidden       | whether it is hidden  | Boolean | false           |
 | tabBarPosition | tabbar position | 'top'\|'bottom' | 'bottom' |
-| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page  | number |   1   |
+| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page, n: render n siblings | number |   -1   |
 | onPress  | on press the bar | (index: number, title: string, key: string) => void | false     |
 
 ### TabBarItem

components/tab-bar/doc/index.zh-CN.md

@@ -24,7 +24,7 @@ subtitle: 标签栏
 | unselectedTintColor       | 未选中的字体颜色  | String | '#888'           |
 | hidden      | 是否隐藏  | Boolean | false           |
 | tabBarPosition | tabbar 位置 | 'top'\|'bottom' | 'bottom' |
-| prerenderingSiblingsNumber| 预加载相邻的tab内容, -1: 加载所有的tab内容, 0: 仅加载当前tab内容  | number |   1   |
+| prerenderingSiblingsNumber| 预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tab | number |   -1   |
 | onPress  | bar 点击触发 | (index: number, title: string, key: string) => void | false    |
 
 ### TabBarItem

components/tab-bar/tab-bar.component.ts

@@ -24,7 +24,7 @@ export class TabBar implements AfterContentInit {
   @Input()
   hidden: boolean = false;
   @Input()
-  prerenderingSiblingsNumber: number = 1;
+  prerenderingSiblingsNumber: number = -1;
   @Input()
   get activeTab(): number {
     return this._activeTab;

components/tabs/doc/index.en-US.md

@@ -28,14 +28,14 @@ animated | Whether to change tabs with animation | boolean |  true | false
 onChange | Callback when tab is switched | (index: number) => void | <span> </span> | false
 onTabClick  | on tab click | (index: number) => void | <span> </span> | false
 distanceToChangeTab | distance to change tab, width ratio | number |  0.3 | false
-| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page  | number |   1   |
+| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page, n: render n siblings | number |   -1   | false
 tabDirection | tab paging direction | 'horizontal' \| 'vertical' |  horizontal | false
 tabBarUnderlineStyle | style of the default tab bar's underline | object | <span> </span> | false
 tabBarBackgroundColor | color of the default tab bar's background | string | <span> </span> | false
 tabBarActiveTextColor | color of the default tab bar's text when active | string | <span> </span> | false
 tabBarInactiveTextColor | color of the default tab bar's text when inactive | string | <span> </span> | false
 tabBarTextStyle | tional styles to the tab bar's text | object | <span> </span> | false
-renderTabBar | render for replace the tab of tabbar | TemplateRef | null
+renderTabBar | render for replace the tab of tabbar | TemplateRef | null | false
 
 ### TabPane
 

components/tabs/doc/index.zh-CN.md

@@ -28,14 +28,14 @@ animated  | 是否开启切换动画 | boolean |  true | false
 onChange  | tab变化时触发 | (index: number) => void | <span> </span> | false
 onTabClick  | tab 被点击的回调 | (index: number) => void | <span> </span> | false
 distanceToChangeTab | 滑动切换阈值(宽度比例) | number |  0.3 | false
-| prerenderingSiblingsNumber| 预加载相邻的tab内容, -1: 加载所有的tab内容, 0: 仅加载当前tab内容 | number |   1   |
+| prerenderingSiblingsNumber| 预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tab | number |   -1   | false
 tabDirection | Tab方向 | 'horizontal' \| 'vertical' |  horizontal | false
 tabBarUnderlineStyle  | tabBar下划线样式 | object | <span> </span> | false
 tabBarBackgroundColor  | tabBar背景色 | string | <span> </span> | false
 tabBarActiveTextColor  | tabBar激活Tab文字颜色 | string | <span> </span> | false
 tabBarInactiveTextColor  | tabBar非激活Tab文字颜色 | string | <span> </span> | false
 tabBarTextStyle  | tabBar文字样式 | object | <span> </span> | false
-renderTabBar | 替换TabBar的Tab | TemplateRef | null
+renderTabBar | 替换TabBar的Tab | TemplateRef | null | false
 
 ### TabPane
 

components/tabs/tab-pane-body.component.html

@@ -1,3 +1,3 @@
-<ng-container *ngIf="!hidden">
+<ng-container *ngIf="loaded || prerender">
   <ng-template [ngTemplateOutlet]="content"></ng-template>
 </ng-container>

components/tabs/tab-pane-body.component.ts

@@ -7,9 +7,21 @@ import { Component, OnInit, Input, HostBinding, TemplateRef, ViewEncapsulation }
 })
 export class TabPaneBody implements OnInit {
 
+  private _prerender: boolean = false;
+
   @Input() active: boolean = false;
-  @Input() hidden: boolean = false;
+  @Input() loaded: boolean = false;
   @Input() content: TemplateRef<void>;
+  @Input()
+  get prerender(): boolean {
+    return this._prerender;
+  }
+  set prerender(value: boolean) {
+    this._prerender = value;
+    if (value) {
+      this.loaded = true;
+    }
+  }
 
   @HostBinding('class.am-tabs-pane-wrap')
   paneWrap: boolean = true;

components/tabs/tabs.component.html

@@ -13,7 +13,7 @@
     <div tab-pane-body
          *ngFor="let tabPane of getCurrentTabPanes(); let i = index"
          [active]="i === selectedKey"
-         [hidden]="prerenderingSiblingsNumber >= 0 && ((selectedKey - i > prerenderingSiblingsNumber) || (selectedKey - i + prerenderingSiblingsNumber < 0 ))"
+         [prerender]="prerenderingSiblingsNumber < 0 || ((selectedKey - i <= prerenderingSiblingsNumber) && (selectedKey - i + prerenderingSiblingsNumber >= 0))"
          [content]="tabPane.content"
     ></div>
   </div>

components/tabs/tabs.component.ts

@@ -68,7 +68,7 @@ export class Tabs implements DoCheck, AfterContentInit {
   @Input()
   tabBarBackgroundColor: string = '#FFF';
   @Input()
-  prerenderingSiblingsNumber: number = 1;
+  prerenderingSiblingsNumber: number = -1;
   @Input()
   tabBarTextStyle: object = {};
   /** should be removed when https://github.com/angular/angular/issues/20810 resolved **/