ionic 2 how to use constants variable's declare in index.html?
Question
I creating a android app in ionic 2. I declare a variable in script tag in index.html. this constant value i want to use in ionic 2 pages and providers code. i pasted my code below. thanks in advance...
index.html
<html lang="en">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
<script type="text/javascript">
BASE_APP_URL="www.google.com";
</script>
</body>
</html>
item-details.ts
import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/item-details/item-details.html'
})
export class ItemDetailsPage {
selectedItem: any;
constructor(public navCtrl: NavController, navParams: NavParams) {
this.selectedItem = navParams.get('item');
console.log(BASE_APP_URL);
<!---it gives an error that name
Error TS2304: Cannot find name 'BASE_APP_URL'. -->
}
}
1 answers
solution1
0 2016-08-17 15:50:13
Even though a better way to handle static settings in an Ionic app would be the one in this post , you can make your code work by:
Including the script with your variable before the
<script src="build/js/app.bundle.js"></script>because that's where you're going to use it.Declaring that variable as part of the
windowobject implicitly.<!-- Your variable --> <script type="text/javascript"> window.BASE_APP_URL="www.google.com"; </script> <!-- the bundle which is built from the app's source code --> <script src="build/js/app.bundle.js"></script>
And then in your code:
import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/item-details/item-details.html'
})
export class ItemDetailsPage {
selectedItem: any;
constructor(public navCtrl: NavController, navParams: NavParams) {
this.selectedItem = navParams.get('item');
console.log(window.BASE_APP_URL);
}
}
That being said, I still recommend this approach when handling static settings in any Ionic 2 app.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.