Ionic 2超出最大調用堆棧大小錯誤

Question

試圖找出此問題。我得到最大調用堆棧大小錯誤，下面的鏈接是js輸出。

我添加打印語句，並制定了主要的應用程序文件被調用第1頁，因爲它應該，但隨後第1頁被調用主應用程序文件，這種情況持續下去。

我是新來的離子2，真的很感謝解決方案，謝謝。

Javascript Output

page1.ts

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); 
     } 

    } 

page1.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); 
    } 
} 

app.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

取出<ion-app>元素從page1.html固定問題