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：无法读取属性＆＃39; getList＆＃39;未定义的       在PageListBaseComponent.set [as baseProvider]（http://localhost:8100/build/main.js:115817:21）       at 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）       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）       在NavControllerBase._viewTest（http://localhost:8100/build/main.js:43627:25）       在NavControllerBase._nextTrns（http://localhost:8100/build/main.js:43370:25）

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

为什么会发生这种情况，文档似乎并未提及您无法在页面上找到此组件。我该如何解决这个问题？

Bounty Edit

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

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

Answer 1

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

我测试了这个，没有更多的堆栈错误，因为你不再有astoot布局和离子选项卡之间的递归关系。

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

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

1 个答案: