2016-06-24 4 views
7

Я следовал примеру, указанному на Ionic2 modals, и не получаю никаких ошибок, но когда я нажимаю на карту, которая должна инициировать модальный, ничего не происходит.Ионный 2 Модальный не показан

Вот код для самого модального:

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

страница, где будет представлена ​​моя модальный выглядит следующим образом:

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

С машинописи, как это:

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

Регистрируется console.log в presentModal, но тот, который находится в конструкторе модальный НЕ. Я не понимаю, что делать, потому что я не уверен на 100%, что происходит?

UPDATE

Когда я отладки в nav.present (функция Nav Controller) вот что я вижу:

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

Мой проект не имеет вкладки в нем так, что утверждение оценивается как истина и настоящая функция эффективно возвращает мне 0 и называет это хорошо. В моем пакете.json мои ионные версии: "ionic-angular": "^2.0.0-beta.8", "ionic-native": "^1.1.0"

Надеемся, эта дополнительная информация поможет диагностировать кого-то умнее меня.

UPDATE 2:

Я обновил до последнего ионного 2 выпуска в 2.0.0-beta.9. Однако, когда я отладки в хромированной консоли я все еще вижу код, указанный выше в моей функции nav.present в ионно-угловом кода, ХОТЯ, когда я смотрю на это в моем собственном коде я вижу это:

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

Я очистил свой кеш и перезагрузил страницу, и все еще появляется старый код. Я, должно быть, схожу с ума. Любое понимание этого было бы потрясающе.

Update 3

Вот код для моих закладках. Live в app.html и индексная переменная - это всего лишь способ запустить приложение на правой вкладке. Она начинается как 1 (или закладка второго):

<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> 
+0

Является ли это вашим.nav вашим контроллером навигации? – Drakee510

+0

Да. Извините, я упустил конструктор – discodane

+0

'.present (myModal)' возвращает обещание. Попробуйте выполнить .present (myModal) .then ((res) => {debugger;}). Catch ((err) => {debugger;}) ', чтобы узнать, возвращается ли какая-либо полезная информация здесь –

ответ

1

В ионной 2 бета-версии 11 обновление исправлено. Единственное отличие моего кода от примера here on ionic's site - это шаблон для моего модального. Супер простой и простой, как это делается.

-1

Импорт NavController в конструкторе следующим образом:

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

И ваш вызов метода this.navController.present(myModal);

+0

Извините. То, что я хотел сказать в своем комментарии, состояло в том, что я AM импортирую контроллер nav так же, как вы здесь (кроме моего только что называемого nav). Я просто не думаю, что необходимо добавить код в мой вопрос. – discodane

5

Я ничего не знаю о коде, обрабатывает вкладки, но я создал Plunker с кодом в этом сообщении (и довольно небольшим изменением), и модально отображается правильно.

Изменение я сделал, это в коде модального:

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

} 

Вы можете играть с this plunker (Ionic2 beta.9).

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

UPDATE:

Я обновил plunker, чтобы включить макет tab, и он работает так, как ожидалось.

Прямую в app.html ...

Я пытался сделать его работу, включая вкладки в app.html, но не смог этого сделать. Итак, я добавил вкладки в home page, который содержит только обе вкладки, а в app.ts я просто установил this.rootPage = HomePage;, так что это первая страница приложения. Не могли бы вы попытаться сделать это в своем приложении, чтобы узнать, могут ли быть включены в него вкладки на странице app?

+0

Я думаю, что проблема с вкладками - это проблема проблемы, потому что, как показано в приведенном выше коде, настоящая функция сначала проверяет, есть ли у навигатора вкладки, и если да, то возвращает 0, фактически не предоставляя мой модальный. – discodane

+0

Есть ли простой способ репликации кода, связанного с вашими вкладками в этом plunker? Таким образом, я смог бы отладить его и внимательно изучить, что происходит внутри страны. – sebaferreras

+0

Я добавил свою вкладку html. В app.js я назначил переменные tab1 и tab2 для реальных компонентов, которые служат своей собственной страницей. – discodane

Смежные вопросы