javascript - Ionic 2标签超过最大调用堆栈大小

这个错误似乎困扰着Ionic2。我已经看过几个有关此主题的问题，但到目前为止，这些问题都没有帮助。

我已经创建了这个组件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>

当我尝试启动我的应用程序时，出现错误消息:



通过调查发现，原因似乎是AstootLayoutComponent引用了它所在的“用户”页面。

为什么会发生这种情况，文档似乎没有提到您不能在页面上将此组件作为下一个组件。我怎样才能解决这个问题？

赏金编辑

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

正如警告一样，由于tabs Controller 处于永久循环中，并且api指向github，因此您可能需要在达到速率限制之前进行切换，可以在Environments.ts中更改url。

最佳答案

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

我对此进行了测试，并且没有更多的堆栈错误，因为您不再具有astoot布局与 ionic 标签之间的递归关系。

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

创建一个单独的Tab组件:

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