离子 2 超出最大调用堆栈大小错误

Question

试图找出这个问题。我收到最大调用堆栈大小错误，下面的链接是 js 输出。

我添加了打印语句并计算出主应用程序文件正在调用 page1，但它应该调用 page1，但随后 page1 正在调用主应用程序文件，这种情况仍在继续。

我是离子 2 的新手，非常感谢解决方案，谢谢。

脚本输出

第 1.T 页

import { Component } from '@angular/core';
    import { Data } from '../../providers/data';
    import { NewListPage } from '../new-list/new-list';
    import { NavController } from 'ionic-angular';
    @Component({
      selector: 'page-page1',
      templateUrl: 'page1.html',
    })
    export class Page1 {
      public list: any[] = [];
      constructor(public navCtrl: NavController, private _data: Data) {
        console.log('Page1BEFORE');
        let that = this;
        this._data.list.subscribe((data) => {that.list.push(data);}, (err) => {console.error(err);});
     }
      newList() {
          console.log('NEWLIST1');
        this.navCtrl.push(NewListPage);
      }
    }

页1.html

<ion-app>
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
    <ion-buttons end>
      <ion-icon ios="ios-contact" md="md-contact"></ion-icon>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="grid-basic-page">
 <ion-col width-100><progress class="progressBar" max="100" value="80"></progress></ion-col>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-list *ngIf="list">
    <ion-item *ngFor="let item of list">
      <ion-label>{{item.title}}</ion-label>
    </ion-item>
  </ion-list>
  <p *ngIf="!list"> No Lists </p>
  <button fab fab-bottom fab-right (click)="newList()"> New </button>
</ion-content>
</ion-app>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Data } from '../providers/data';
@Component({
  templateUrl: 'app.html',
  providers: [Data],
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = Page1;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform) {
  console.log('PreAPP');
    this.initializeApp();
  console.log('PostApp');
    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];
    console.log('pages');
  }
  initializeApp() {
  console.log('APP');
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
  openPage(page) {
    console.log('OpenPAGE');
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

应用.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{ p.title }}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Answer 1

从第 1 页中删除<ion-app>元素.html修复了该问题

Answer 2

就我而言，我没有在模块的导入数组中声明和添加路由常量。一旦声明和导入错误就消失了。我正在使用离子4