Ionic 2 Tabs超出最大調用堆棧大小

Question

這個錯誤似乎是困擾Ionic 2的瘟疫。我已經看了幾個有關此主題的問題，但目前爲止沒有任何幫助。

我已經創建了圍繞我所有的頁面此組件佈局組件：

<ion-header> 
    <ion-navbar> 
    <button ion-button icon-only menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     {{pageName}} 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ng-content> 
</ng-content> 
<ion-footer> 
    <ion-toolbar> 
    <ion-tabs> 
     <ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab> 
    </ion-tabs> 
    </ion-toolbar> 
</ion-footer> 

和TS文件看起來像這樣：

export class AstootLayoutComponent { 

    @Input() pageName: string; 

    usersPage: any = UsersPage; 
    profilePage: any = ProfilePage; 

} 

然後，我有消耗此組件的用戶頁面看起來像這樣：

<astoot-layout [pageName]="pageName"> 
    <ion-content padding> 
    <page-list-base [detailPageType]="userDetailType" [baseProvider]="baseProvider" [config]="pageListConfiguration"></page-list-base> 
    </ion-content> 
</astoot-layout> 

當我嘗試啓動我的應用程序時，我收到一個e RROR：

Maximum call stack size exceeded

TypeError: Cannot read property 'getList' of undefined at PageListBaseComponent.set [as baseProvider] (http://localhost:8100/build/main.js:115817:21) at Wrapper_PageListBaseComponent.check_baseProvider (/AppModule/PageListBaseComponent/wrapper.ngfactory.js:38:31) at CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal (/AppModule/UsersPage/component.ngfactory.js:80:35) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:111894:18) at CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal (/AppModule/UsersPage/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) at ViewRef_.detectChanges (http://localhost:8100/build/main.js:77367:20) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43575:40) at NavControllerBase._transitionInit (http://localhost:8100/build/main.js:43678:18) at NavControllerBase._postViewInit (http://localhost:8100/build/main.js:43531:14) at NavControllerBase._viewTest (http://localhost:8100/build/main.js:43627:25) at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:43370:25)

通過一些調查的原因似乎是，該AstootLayoutComponent引用用戶頁面，它駐留在事實上一些如何創建一個永遠的循環。

爲什麼會發生這種情況，文檔似乎沒有提到您不能在頁面上接下來的這個組件。我怎樣才能解決這個問題？

賞金編輯

我創建了一個Repository它複製了我的問題

正如一個警告，因爲標籤控制器是一個永遠的循環，且API指出，github上，所以你可能要切換，然後打到速率限制，你可以改變在Environments.ts

Answer 1

url我認爲你需要添加一個製表符組件。因此，您在astoot佈局中所做的一些工作將移至此選項卡組件。我打開了一個PR：https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1

我測試了這個，沒有更多的堆棧錯誤，因爲你不再有astoot佈局和離子選項卡之間的遞歸關係。隨着包含從astoot佈局組件的頁面類型的腳本文件

<ion-tabs> 
    <ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab> 
    <ion-tab [root]="profilePage" tabTitle="Profile" tabIcon="person"></ion-tab> 
</ion-tabs> 

：

從Astoot佈局組件移除標籤組件：

<ion-header> 
    <ion-navbar> 
    <button ion-button icon-only menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     {{pageName}} 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ng-content> 
</ng-content> 

創建一個單獨的標籤組件。

import { ProfilePage } from './../profile/profile'; 
import { UsersPage } from './../users/users'; 
import { Component } from '@angular/core'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    usersPage: any = UsersPage; 
    profilePage: any = ProfilePage; 

    constructor() { 

    } 
} 

添加新標籤頁的app.module.ts並設置rootPage: any = TabsPage;這個現在將作爲你的母版頁和內容將transcluded到您的視圖。