Modem jonowy 2 nie pokazuje

Question

Podążyłem za przykładem podanym na Ionic2 modals i nie otrzymuję żadnych błędów, ale kiedy klikam kartę, która powinna zainicjować modalny nic się nie dzieje.

Oto kod na modalnym samego:

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

strona gdzie mój modalne zostaną zaprezentowane wygląda następująco:

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

Z maszynopisu jak ten:

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

Rejestracja console.log w presentModal, ale w konstruktorze modalny NIE jest. Nie mam pojęcia, co robić, bo nie jestem w 100% pewien, co się dzieje?

UPDATE

Kiedy debugowania do nav.present (funkcja Nav Controller) oto co widzę:

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

Mój projekt ma karty w nim tak, że oświadczenie wartość true a obecna funkcja skutecznie zwraca mi 0 i nazywa to dobrze. W moim package.json moje wersje jonowe to: "ionic-angular": "^2.0.0-beta.8", "ionic-native": "^1.1.0"

Mam nadzieję, że ta dodatkowa informacja pomoże zdiagnozować kogoś mądrzejszego ode mnie.

UPDATE 2:

mam zaktualizowany do najnowszej jonowej 2 w wydaniu 2.0.0-beta.9. Jednak, kiedy debugowania w konsoli chrom wciąż widzę powyższy kod w mojej funkcji nav.present w kodzie jonowych kątowym, choć kiedy patrzę na to w moim własnym kodem widzę to:

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

Oczyściłem pamięć podręczną i mocno wczytałem stronę, a nadal wyświetla się stary kod. Muszę tracić rozum. Wszelkie wgląd w to byłoby niesamowite.

Update 3

Oto kod dla moich zakładkach. Live in the app.html i zmienna index to tylko sposób na uruchomienie aplikacji na prawej karcie. Zaczyna jako 1 (lub druga karta):

<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

W wersji jonowej 2 beta 11 aktualizacja rozwiązała problem. Jedyną różnicą w moim kodzie z przykładu here on ionic's site jest szablon dla mojego modalu. Super proste i proste, jak to się robi.

Answer 2

Importuj NavController w konstruktorze tak:

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

i rozmowa metoda this.navController.present(myModal);

Answer 3

ja nic o kodzie wiedzieć, że obsługuje karty, ale stworzyłem Plunkera z kodem w tym poście (i całkiem małą zmianą), a modal wyświetla się poprawnie.

Zmiana zrobiłem, to w kodzie modalnej:

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

} 

Możesz poeksperymentować z this plunker (Ionic2 beta.9).

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

UPDATE:

Zaktualizowałem plunker, aby uwzględnić układ tab i działa zgodnie z oczekiwaniami.

na żywo w app.html ...

starałem, aby pracować w tym zakładkach app.html ale nie mógł tego zrobić. Dodałem więc zakładki w home page, która zawiera tylko dwie zakładki, aw app.ts ustawiam tylko this.rootPage = HomePage;, tak aby była pierwszą stroną aplikacji. Czy możesz spróbować zrobić to w swojej aplikacji, aby sprawdzić, czy uwzględnienie zakładek na stronie app może być niemożliwe?