Ionic 2タブ最大呼び出しスタックサイズを超えました

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> 

私は私のアプリケーションを開始しようとすると、 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は、それが常駐ユーザーページを参照しているという事実であるように思わ一部永遠にループを作成する方法。

なぜこのようなことが起こっているのですが、ドキュメンテーションではページ上でこのコンポーネントの次の操作ができないとは言えません。これをどうすれば解決できますか？

バウンティ編集

私はタブコントローラは永遠にループ内にあり、かつAPIがgithubのを指摘されているので、あなたのため、単なる警告として

私の問題を複製Repositoryを作成しましたその制限を打つ前にそれを切り替えることができますEnvironments.tsのURLを変更することができます

Answer 1

私はあなたがタブコンポーネントを追加する必要があると思う。したがって、あなたが作成した作業の一部は、このタブコンポーネントに移動されます。私は広報を開きました：https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1

私はこれをテストしました。あなたはもはや、宇宙飛行レイアウトとイオンタブとの間に再帰的な関係がないので、スタックエラーはありません。

はAstootレイアウトComponentからタブコンポーネントを削除します。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> 

：

<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;これは今あなたのマスターページとして機能しますし、あなたのコンテンツは、あなたのビューにトランスクルードされます設定します。