标签: ionic2

我已经按照本教程概述了在Ionic 2应用程序中添加监控信标.我有它工作得很好:当视图加载时,它初始化并开始监听信标:

home.ts

    ionViewDidLoad() {
        this.platform.ready().then(() => {
            this.beaconProvider.initialise().then((isInitialised) => {
                if (isInitialised) {
                    this.listenToBeaconEvents();
                }
            });
        });
    } 

这将调用listenToBeaconEvents函数,该函数使用所有信标填充视图中的列表:

home.ts

    listenToBeaconEvents() {
        this.events.subscribe(‘didRangeBeaconsInRegion’, (data) => {

            // update the UI with the beacon list
            this.zone.run(() => {

                this.beacons = [];

                let beaconList = data.beacons;
                beaconList.forEach((beacon) => {
                    let beaconObject = new BeaconModel(beacon);
                    this.beacons.push(beaconObject);
                });

            });

        });
    }

我可以使用this.beaconProvider.stopRanging()以下函数调用函数来停止测距:

信标provider.ts

    stopRanging() {
        if (this.platform.is('cordova')) {
            // stop ranging
            this.ibeacon.stopRangingBeaconsInRegion(this.region)
                .then(
                () => {
                    console.log('Stopped …

我将cli更新为离子3版本,当我运行时

离子cordova运行android

构建apk文件并在android模拟器中运行我收到此错误

    C:\Users\XXXX\Desktop\beep>ionic cordova run android
Running app-scripts build: --address 0.0.0.0 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser

[20:52:20]  build dev started ...
[20:52:20]  clean started ...
[20:52:20]  clean finished in 11 ms
[20:52:20]  copy started ...
[20:52:20]  transpile started ...
[20:52:22]  transpile finished in 2.53 s
[20:52:22]  preprocess started ...
[20:52:22]  deeplinks started ...
[20:52:23]  deeplinks finished in 52 ms
[20:52:23]  preprocess finished in 54 ms
[20:52:23]  webpack started ...
[20:52:23]  copy finished in …

是否可以访问push notification离子2中的内容并在通知到达时执行一堆代码event fire？

颜色属性在离子2中不起作用.颜色在普通IONIC标签中起作用,但在HTM1标签中起作用.你能帮忙吗？代码写在下面.

<ion-content>
<div class="page-home">
<h1 color="secondary">LOGO</h1>
<br/>
<br/>
<p color="danger">Sign in with social media account</p>
<div id="socialLogin">
  <img src="assets/icon/fb.svg" />
  <img src="assets/icon/tw.svg" />
  <img src="assets/icon/goo.svg" />
</div>
<ion-list>
  <ion-item>
    <ion-label floating color="secondary">Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>
<br/>
<br/>
<button ion-button full icon-left> <ion-icon name="log-in"></ion-icon>Login</button>

<button ion-button clear>Register</button>/
<button ion-button clear>Forgot Passowrd</button>
 </div>

</ion-content>

我正在用离子2创建一个登录.请不要只回答"你只需要添加[(ngModules)] - 属性".如果您认为这是解决方案,请解释原因.解释一下,就像你会对孩子一样.

我在login.ts中的代码:

 import {Component} from '@angular/core';
 import {IonicPage, NavController, NavParams, MenuController} from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  password: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.menu.enable(false, "");
  }

  login() {
    alert(this.password);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
}

login.html中的代码

<ion-content padding id="login-dialog">
  <ion-list inset>

    <ion-item no-padding>
      <ion-label color="primary">
        <ion-icon name="person"></ion-icon>
      </ion-label>
      <ion-input type="text" placeholder="Username"></ion-input>
    </ion-item>

    <ion-item no-padding>
      <ion-label color="primary">
        <ion-icon name="lock"></ion-icon>
      </ion-label>
      <ion-input type="password" …

我想在localStorage上已经有令牌时将页面重定向到主页(覆盖登录页面).怎么做？我在app.component.ts上的构造函数()上有以下代码,但它在请求完成之前首先显示登录

statusBar.backgroundColorByHexString('#D32F2F');
      splashScreen.hide();
      if(localStorage.getItem('token')){
        authProvider.silent_login().subscribe(res => {
          console.log(res);
          if(res.error==0){
            this.rootPage = HomePage;
          }
        })
      }

在我的Ionic2应用程序中,我有一个处理所有http请求的服务.当http调用中发生任何错误时,我有一个警报控制器.在按钮上单击此警报我想再次运行该调用.我现在能够做到.问题是响应未解析为从哪个函数调用的页面.

服务代码:

loadCity(){
return new Promise(resolve => {
this.http.get(url).map(res=>res.json())
.subscribe(data => {resolve(data)},
err => { this.showAlert(err); }
});
}

showAlert(err: any){
// code for alert controller, I am only writing handler of alert 
//controller refresh button
handler => {this.loadCity();}
}

CityPage中的代码

showCity(){
this.cityService.loadCity()
.then(data => {//process data});
}

处理程序再次调用函数,但此时承诺未解析为CityPage showCity()函数.

我正在使用ionic3创建一个登录页面,并进行表单验证.当我运行Android和浏览器平台的应用程序时,验证显示为红色底部边框.但对于ios平台,它底部没有显示红色边框.我错过了什么？

参考屏幕截图

我不确定我是否遗漏了某些东西,但是当我尝试将一个跨度添加到Ion Item时,不会渲染范围,也不会显示div.

<ion-card>
  <ion-card-title>
  </ion-card-title>
  <div>
    <button ion-button (click)="toggleEdit()">Edit</button>
  </div>
  <ion-list>
    <ion-card-content>
      <ion-item [hidden]="editOptions.!isEditing">
        <span class="inline-edit">Text</span>

        <ion-label color="primary">{{label}}</ion-label>
        <ion-input></ion-input>
        <span class="inline-edit">{{value}}&nbsp;</span>
      </ion-item>
      <ion-item [hidden]="!editOptions.isEditing">
        <ion-label color="primary">{{label}}</ion-label>
        <ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input>
      </ion-item>
    </ion-card-content>
  </ion-list>
</ion-card>

离子标签和输入显示和工作正常,但当我尝试在他们不渲染的项目中使用跨度或div时.即使我用铬检查它们.

如何呈现简单文本,我不允许在组件中使用HTML？什么是Ionic 2等效地渲染少​​量文本,看起来标签必须始终在输入上,所以我应该使用什么组件？

加载页面时会显示谷歌地图.但是当切换离子段时,不会显示地图.以下是我的离子2代码:

<ion-header>
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="social" (ionChange)="segementChangeAction()">
      <ion-segment-button value="activity">
        Map
      </ion-segment-button>
      <ion-segment-button value="messages">
        Messages
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>



<ion-content no-bounce>
  <div [ngSwitch]="social">
    <div *ngSwitchCase="'activity'">
        <div #map id="map"></div>
    </div>
    <div *ngSwitchCase="'messages'">
      Some text.....        
    </div>
  </div>
</ion-content>