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>

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

超过最大调用堆栈大小

TypeError：无法读取未定义的属性“getList” 在 PageListBaseComponent.set [作为 baseProvider] (http://localhost:8100/build/main.js:115817:21) 在 Wrapper_PageListBaseComponent.check_baseProvider (/AppModule/PageListBaseComponent/wrapper.ngfactory.js:38:31) 在 CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal (/AppModule/UsersPage/component.ngfactory.js:80:35) 在 CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) 在 CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) 在 CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:111894:18) 在 CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal (/AppModule/UsersPage/host.ngfactory.js:29:19) 在 CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) 在 CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) 在 ViewRef_.detectChanges (http://localhost:8100/build/main.js:77367:20) 在 NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43575:40) 在 NavControllerBase._transitionInit (http://localhost:8100/build/main.js:43678:18) 在 NavControllerBase._postViewInit (http://localhost:8100/build/main.js:43531:14) 在 NavControllerBase._viewTest (http://localhost:8100/build/main.js:43627:25) 在 NavControllerBase._nextTrns (http://localhost:8100/build/main.js:43370:25)

通过一些调查，原因似乎是 AstootLayoutComponent 引用了它所在的用户页面。一些如何创建一个永久循环。

为什么会发生这种情况，文档似乎没有提到您不能在页面上放置此组件。我该如何解决这个问题？

赏金编辑

我创建了一个 Repository 来复制我的问题

就像一个警告，因为选项卡控制器处于永久循环中，并且 api 指向 github，所以您可能希望在达到速率限制之前切换它，您可以更改 Environments.ts 中的 url

Answer 1

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

我对此进行了测试，没有更多的堆栈错误，因为您不再有 astoot 布局和 ion-tabs 之间的递归关系。

从 Astoot 布局组件中移除 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>

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

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