首页 文章

Ionic 2 Tabs超出最大调用堆栈大小

提问于
浏览 次
7

这个错误似乎是困扰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：无法在Wrapper_PageListBaseComponent.check_baseProvider（/ AppModule）的PageListBaseComponent.set [as baseProvider]（http：// localhost：8100 / build / main.js：115817：21）读取未定义的属性'getList' /PageListBaseComponent/wrapper.ngfactory.js:38:31）在CompiledTemplate.proxy.CyngesChanges的内部CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal（/AppModule/UsersPage/component.ngfactory.js:80:35）（http：// localhost：8100 / build / main.js：111909：14）CompiledTemplate.proxyViewClass.DebugAppView.detectChanges（http：// localhost：8100 / build / main.js：112104：44）at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges（在CompiledTemplate.proxyViewClass.AppView.detectChanges的CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal（/AppModule/UsersPage/host.ngfactory.js:29:19）的http：// localhost：8100 / build / main.js：111894：18） （http：// localhost：8100 / build / main.js：111909：14）在CompiledTemplat上在ViewRef_.detectChanges（http：// localhost：8100 / build / main.js：77367：20）的e.proxyViewClass.DebugAppView.detectChanges（http：// localhost：8100 / build / main.js：112104：44）位于NavControllerBase._transitionInit的NavControllerBase._trataitionInit（http：// localhost：8100 / build / main.js：43678：40）中的NavControllerBase._viewAttachToDOM（http：// localhost：8100 / build / main.js：43575：40） http：// localhost：8100 / build / main.js：43531：14）位于NavControllerBase._nextTrns的NavControllerBase._viewTest（http：// localhost：8100 / build / main.js：43627：25）（http：//本地主机：8100 /编译/ main.js：43370：25）

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

为什么会这样，文档似乎没有提到你不能在页面上下一个这个组件 . 我怎样才能解决这个问题？

Bounty Edit

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

就像一个警告，因为标签控制器处于永久循环中，并且api指向github，所以你可能想要在达到速率限制之前切换它，你可以在Environments.ts中更改网址 .

javascript angular ionic2

1 回答

  • 2

    我认为你需要添加一个Tabs组件 . 因此，您在astoot布局中执行的一些工作将移至此Tabs组件 . 我开了一个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>

    创建一个单独的Tabs组件：

    <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; 这将成为您的母版页，您的内容将被转换到您的视图中 .

    回复于

相关问题