<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.11/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.11/bundles/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { NavController, ModalController, App } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
greeting: string;
constructor(private nav: NavController, private modalCtrl: ModalController,
private app: App) {
}
goToPage1= ()=> {
let modal = this.modalCtrl.create(Page1);
modal.present();
setTimeout(() => {
/*
per https://github.com/driftyco/ionic/blob/master/src/components/modal/modal.ts#L84
should be able to dismiss modal by poping on root nav
*/
console.log("timeout fired. Popping to root");
console.log("rootNav",this.app.getRootNav());
console.log("nav",this.nav);
this.app.getRootNav().pop().then(()=>console.log(this.app.getRootNav());
},1000);
}
ionViewWillEnter = () => {
console.log("%cHome::ionViewWillEnter", "color: #7D7D7D");
}
ionViewDidLeave = () => {
console.log("%cHome::ionViewDidLeave", "color: #7D7D7D");
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
'@angular/forms': 'https://npmcdn.com/@angular/forms@0.2.0'
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'@angular/forms': { main: 'index.js', defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
constructor(private platform: Platform) {
this.rootPage = HomePage;
}
}
ionicBootstrap(MyApp);
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
<p>
per <a href='http://ionicframework.com/docs/v2/api/components/modal/ModalController/'>docs</a>
should be able to dismiss the modal by POP-ing on the rootNav.
after clicking Display Modal, timeout will fire after 1 second and pop root nav. Expected result is modal closes
</p>
<button secondary (click)="goToPage1()">Display Modal</button>
</div>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from '@angular/core';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
constructor( ) {
}
ionViewWillEnter = () => {
console.log("%cPage1::ionViewWillEnter", "color: #7D7D7D");
}
ionViewDidLeave = () => {
console.log("%cPage1::ionViewDidLeave", "color: #7D7D7D");
}
}
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
this content is in a modal
</div>
</ion-content>
import { Component } from "@angular/core";
import {HomePage} from './home.ts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>