这个错误似乎是困扰 Ionic 2 的瘟疫。我已经看过几个关于这个主题的问题，但到目前为止没有一个有帮助。

我创建了这个组件 Layout Component，它包装了我的所有页面:

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

当我尝试启动我的应用程序时，我收到一个错误:

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这复制了我的问题

作为警告，因为选项卡 Controller 处于永远循环中，并且 api 指向 github，因此您可能希望在达到速率限制之前切换它，您可以更改 Environments.ts 中的 url

最佳答案

我认为您需要添加一个选项卡组件。因此，您在 astoot 布局中所做的一些工作将移至此选项卡组件。我开了个PR:https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1

我测试了这个并且没有更多的堆栈错误，因为你不再有 astoot 布局和 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>

创建一个单独的选项卡组件:

<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 布局组件的页面的类型脚本文件。

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;这现在将充当您的母版页，您的内容将被嵌入到您的 View 中。

关于javascript - Ionic 2 Tabs 超出最大调用堆栈大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44815548/