Ionic 2 Modal non visualizzato

Question

Ho seguito l'esempio dato su Ionic2 modals e non ricevo errori, ma quando faccio clic sulla scheda che dovrebbe iniziare il modale non succede niente.

Ecco il codice per il modal sé:

@Component ({ 
    template: ` 
     <ion-card class='popover'> 
      <ion-card-content> 
       Hello 
      </ion-card-content> 
     </ion-card> 
    ` 
}) 

export class AccModal { 

    dumbData: number; 
    constructor() { 
     console.log("constructor"); 
     this.dumbData= 22; 
    } 
} 

La pagina in cui sarà presentato il mio modale si presenta così:

<ion-card (click)='presentModal()' class='custom-card'> 
    <ion-card-header> 
     Sched. Accuracy 
    </ion-card-header> 
    <ion-card-content> 
     71% 
    </ion-card-content> 
</ion-card> 

Con il dattiloscritto in questo modo:

presentModal() { 
    let myModal = Modal.create(AccModal, {param: "something"}); 
    console.log('myModal is ', myModal); 
    this.nav.present(myModal); 
    console.log("function being called"); 
} 

Il console.log nello presentModal è stato registrato ma quello nel costruttore di il modale NON è. Sono in perdita su cosa fare perché non sono sicuro al 100% che cosa sta succedendo?

UPDATE

Quando il debug nella nav.present (funzione Nav Controller) qui è quello che vedo:

if (rootNav['_tabs']) { 
    // TODO: must have until this goes in 
    // https://github.com/angular/angular/issues/5481 
    void 0; 
    return; 
} 

Il mio progetto non ha schede in modo che la dichiarazione restituisce true e la funzione presente mi restituisce effettivamente uno 0 e lo chiama buono. Nel mio package.json le mie versioni ioniche sono: "ionic-angular": "^2.0.0-beta.8", "ionic-native": "^1.1.0"

Speriamo che questa aggiunta di informazioni aiuti a diagnosticare qualcuno più intelligente di me.

UPDATE 2:

ho aggiornato all'ultima ionica 2 rilascio in 2.0.0-beta.9. Tuttavia, quando il debug nella console cromata vedo ancora il codice di cui sopra nella mia funzione nav.present nel codice ionico-angolare, anche se, quando lo guardo nel mio proprio codice vedo questo:

if (rootNav['_tabs']) { 
    // TODO: must have until this goes in 
    // https://github.com/angular/angular/issues/5481 
    console.error('A parent <ion-nav> is required for ActionSheet/Alert/Modal/Loading'); 
    return; 
} 

Ho svuotato la cache e ho ricaricato la pagina e il vecchio codice si presenta ancora. Devo perdere la testa. Qualche idea su questo sarebbe sorprendente.

Update 3

Ecco il codice per le mie schede. Il live in app.html e la variabile index è solo un modo per avviare l'app nella scheda giusta. Si inizia come 1 (o la seconda scheda):

<ion-tabs greenTheme [selectedIndex]="index"> 
    <ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab> 
    <ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab> 
</ion-tabs> 

Answer 1

Nella ionica 2 beta 11, l'aggiornamento ha risolto il problema. L'unica differenza nel mio codice dall'esempio here on ionic's site è il modello per la mia modale. Super semplice e intuitivo su come è fatto.

Answer 2

Importare il NavController nel costruttore in questo modo:

constructor(private navController: NavController) { 
    // Whatever goes here 
} 

e il metodo di chiamata this.navController.present(myModal);

Answer 3

so nulla del codice che gestisce le schede, ma ho creato un Plunker con il codice in questo post (e una modifica piuttosto piccola), e la modale appare correttamente.

Il cambiamento che ho fatto, è nel codice modale:

// Add NavParams to use it later in the modal's constructor 
import { ..., NavParams } from 'ionic-angular'; 

@Component ({ 
    template: ` 
     <ion-card class='popover'> 
      <ion-card-content> 
       Hello 
      </ion-card-content> 
     </ion-card> 
    ` 
}) 
export class AccModal { 

    private dumbData: number; 

    // I've added the params variable, because you're calling this constructor 
    // with a parameter (called 'param' and with the 'something' value) 
    constructor(private params: NavParams) { 

    console.log("constructor"); 
    this.dumbData= 22; 

    // You can see in the console the parameter being printed properly 
    console.log('Param:', params.get('param')); 
} 

} 

Si può giocare con this plunker (Ionic2 beta.9).

====================================

UPDATE:

Ho aggiornato il plunker per includere un layout tab e funziona come previsto.

Il live nel app.html ...

ho cercato di farlo funzionare tra cui le schede della app.html, ma non poteva farlo. Quindi, ho aggiunto le schede in un home page che contiene solo entrambe le schede e nel app.ts ho appena impostato this.rootPage = HomePage; in modo che sia la prima pagina dell'applicazione. Puoi provare a farlo nella tua app, per vedere se includere le schede nella pagina app potrebbe essere realizzato per il problema?