Ionic2 问题解决汇总

由于ionic2资料较少,再加上本人跛足的英语,在学习中遇到的问题不少,故整理出来,防止今后再次入坑。

1 .no emulator images (avds) found 错误解决方案
Ionic2 问题解决汇总_第1张图片

此错误,已明确告诉缺少avd,解决办法如下:
①:执行命令行 android avd ,弹出窗口,如图,选择合适的虚拟机设备,点击 “create AVD”按钮
Ionic2 问题解决汇总_第2张图片

②: 弹出如下窗口,设置完成后点击 “OK”按钮 即可大功告成
Ionic2 问题解决汇总_第3张图片
③:注意:若在第二步的时候不能点击 ok ,可能是sdk因为缺少东西,如图,安装该插件即可。
Ionic2 问题解决汇总_第4张图片

2.解决页面跳转无法覆盖整个视窗问题
一般的我们在跳转页面时,期望的时使其覆盖整个屏幕,但是我们使用
this.navCtrl.push();的时候,如果底部或顶部有导航栏时,打开的新页面无法覆盖整个屏幕。
解决办法:

注入app类 import { App } from 'ionic-angular';  
初始化 声明app类 constructor(private app:App) {}  
 调用 this.app,getRootNav();
     this.app.getRootNav().push(new page);

3.ionic2 异步请求 GET方法

①:注入Http

import { Http } from '@angular/http';

②:控制器中引用

constructor(public http:Http){}

③:开始异步调用

this.http.get('请求地址')
    .map(res => res.json())
    .subscribe(data=>{处理返回的data数据},error=>{请求错误处理})

4.ionic2 异步请求post方法
①注入相关类

import { Http, Headers,RequestOptions} from '@angular/http';

②处理请求中body格式

headleAjaxBodyParam(param) {
  let bodyStr = [];
  for (let item in param) {
    bodyStr.push(item + '=' + param[item])
  }
  return bodyStr.join('&');
}

③: 开始post请求

this.http.post(url, this.headleAjaxBodyParam({key:value}),options)
      .subscribe((data) => {let myData = data.json();},(err) => {});

5.angular2的背景图片渲染
由于ionic2使用了angular2,在实际项目中,遇到了使用ngFor循环渲染时,同时要使用内嵌样式渲染出背景图片,书写方法如下:

<div [ngStyle]="{'background-image':'url('+ 数据变量 +')'}">div>

6.解决ionic start 错误问题
使用国内镜像cnpm,安装命令是

npm install -g cnpm

然后试一下cnpm -v看看有没有版本号出来,有则安装成功,继续执行如下命令

ionic start app --v2 --skip-npm

解释一下上面的语句,–v2表示采用Ionic2版本创建app,–skip-npm表示跳过npm installl package阶段
所以这次就不会有那个错误提示,但也没有真的完成创建,我们还需要进入app目录下,执行:

cnpm install --save

没有报错即说明成功,此时可以使用ionic serve命令,在浏览器上看看我们的app界面效果了

你可能感兴趣的:(Ionic)