标签: ionic2

我在我的应用程序中加载 socket.io，如下所示：

index.html
<script src="http://myapp.com/socket.io/socket.io.js"></script>
...
// Angular stuff

我有一个Socket需要window.io工作的组件。

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';

@Injectable()
export class Socket {

  public isConnected: boolean = false;

  constructor(public events: Events) {
    if (typeof window.io === "undefined") {
        throw new Error("Socket.io is undefined.");
    }

    this.io = window.io;
  }

  connect() {
    this.io.connect("...");
  }

  listen() {

  }

}

从理论上讲，它可能有效（未测试），但将窗口范围内的内容注入类并不是一个好习惯。

有没有办法做到这一点：

import { SocketIODriver } from 'socket.io';
import { Socket } from 'App/Socket/Socket';

@Component({
   templateUrl: …

我在 ionic 2 项目中工作，创建滑动以删除每个工作正常的项目，还需要单击按钮删除所有项目如何从 angular 2 的列表中删除所有项目？

<button ion-button clear>Clear All</button>    
<ion-item-sliding *ngFor="let note of notes">
          <ion-item>
              {{note.title}}
          </ion-item>
          <ion-item-options>
              <button (click)="deleteNote(note)" danger>
                  <ion-icon name="trash"></ion-icon>
              </button>
          </ion-item-options>
        </ion-item-sliding>

文件.ts

constructor( public viewCtrl: ViewController ) { 
    this.notes = [
      { title: 'This is notification swipe to delete' },
      { title: 'This is notification swipe to delete' }    
      ];
  }
deleteNote(note){

        let index = this.notes.indexOf(note);

        if(index > -1){
            this.notes.splice(index, 1);
        }
    }

我有这个代码来检查是否连接到互联网的 Firebase。但问题表明，this.total_downloaded=1即使我之前被声明construct()为，我也无法设置public total_downloaded=0。

为什么会这样？我不应该能够轻松使用我的函数或设置变量吗？

有人能帮我吗？谢谢。这是我的代码：

public this.total_downloaded = 0;
//...
var connectedRef = firebase.database().ref('/.info/connected');
connectedRef.once("value", function(snap) {
    if (snap.val() === true) {
        firebase.database()
            .ref("last_update")
            .once('value', (snap_0) => {
                if (data.rows.item(0).value != snap_0.val().value) {
                    this.update_hok_baghu(db);

                    var query_insert_last_update = "UPDATE last_update SET value =" + snap_0.val().value + "";
                    db.executeSql(query_insert_last_update, []).then(() => {
                    }, (error) => {
                        console.log("ERROR on update to last_update: " + JSON.stringify(error));
                    });

                } else {
                    this.total_downloaded = 1;
                }
            });
    } else { …

我尝试为我的Ionic移动应用程序创建类似 动画的示例,我有小问题,实际上这个动画部分不适合我,任何人都知道如何正确地将该脚本部分放入Ionic,请帮我修复该问题谢谢

这是我的代码示例我的实时代码部分没有动画

这是我的代码

HTML

<div class="claps">
  <button id="clap" class="clap">
  <span>
    <!--  SVG Created by Luis Durazo from the Noun Project  -->
    <svg id="clap--icon" xmlns="http://www.w3.org/2000/svg" viewBox="-549 338 100.1 125">
  <path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z"/>
  <path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 …

我正试图使用​​弹性框垂直居中.

这是我的代码:

<ion-grid>
    <ion-row>
      <ion-col>
        <div class="logo-part">
          <img id="logo" src="assets/logo/logo.png" alt="img-logo">
          <ion-title>Service at your fingertips!</ion-title>
        </div>
      </ion-col>
    </ion-row>
</ion-grid>

CSS:

ion-content ion-grid {
  height: 100%;
}
ion-content ion-row{
  height: 50%;
}
div.logo-part {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
img{
width:25%;
text-align:center;
}

图像没有垂直定位在中心!

有什么帮助吗？

谢谢.

我正在寻找ionic2最佳实践来显示负载，警报和控制台日志。

因此，而不是在每个页面中重复下面的代码，因此我只能调用一次。

例如显示加载的代码：

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: ''
    });
    this.loading.present();
  }

创建提供程序并显示上一次的负载是最佳实践吗？还是提供程序不支持加载或类似内容？

谢谢。

当我从firebase获取数据时,我正在尝试重定向.如果它为null或空,则无需重定向.

我正在尝试使用this.navCtrl.push(ProspectPage);但不知道为什么它不工作它返回一个错误

TypeError: this is null

这是我的代码,请检查一下,让我知道我在这里做错了什么.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ProspectPage } from '../prospect/prospect';
import * as firebase from 'firebase';

@Component({
  selector: 'page-credentials',
  templateUrl: 'credentials.html'
})
export class CredentialsPage {
  constructor(public navCtrl: NavController) {
}

register(params){
// this.navCtrl.push(ProspectPage); // if i wrote here then it works
  ref.orderByChild("ssn").equalTo(1234).on("value", function(snapshot) {
    if(snapshot.val())
    {
      this.navCtrl.push(ProspectPage);
    }
   });
  }
 }

看register()有一条评论.如果我this.navCtrl.push(ProspectPage);在函数的开头添加,那么它的工作原理.但是当我从firbase获取数据时它应该工作.

在这里,是我的HTML代码.

<button id="credentials-button1" ion-button color="stable" block on-click="register()"> Lets …

这是一堂课

export class ChatDetailPage {

constructor(){

}

funcA(){
     var options = {
        onSubmit: function (text) {
        //i want to be able to access funcB from here 
        this.funcB(text)
          },
this.nativeKeyboard.showMessenger(options)
}

funcB(text){
  alert (text);
}

}

在这种情况下,我如何从Anular 2或Ionic 3中的onsubmit回调函数调用funcB.

提前致谢.

我正在尝试在handleError（）方法内进行loading.dismiss（），但不确定如何做？响应良好时，它可以正常工作，不确定如何处理错误情况

请帮忙

@Injectable()

导出类SharedProvider {

 private _postsURL = "https://jsonplaceholder.typicode.com/posts";

 constructor(private http: Http, public loadingCtrl: LoadingController) {
 }



 getPosts(): Observable<IPosts[]> {

    let loading = this.loadingCtrl.create({
        content: 'loading...'
      });
      loading.present();
     return this.http
         .get(this._postsURL)
         .map((response: Response) => {
            loading.dismiss();
            console.log("Result printed!!");
             return <IPosts[]>response.json();

         })
         .catch(this.handleError);


 }

  handleError(error: Response) {
      this.loading.dismiss();
     console.log("Err printed!!" + error.statusText);
     return Observable.throw(error.statusText);
 }

}

这是我的代码:

properties.service.ts

get(stringParams) {
    let headers = new Headers({
      "X-AUTH-APIKEY":  API_KEY
    });

    this.options = new RequestOptions({
      headers: headers
    });
    return this.http
      .get(`${API_URL}/properties/?${stringParams}`, this.options)
      .timeout(50)
      .map((response: Response) => response.json())
  }



posts.ts

    this.propertiesService.get(arrayParams).subscribe((data: any) => {

    }), (err) => { console.log("timeoout")};

我把50放在我的超时中因此被解雇但我无法以这种方式捕获错误

}), (err) => { console.log("timeoout")};

我收到此错误:

TimeoutError {name: "TimeoutError", stack: "TimeoutError: Timeout has occurred?    at new Time…http://localhost:8100/build/polyfills.js:3:10143)", message: "Timeout has occurred"

编辑:

this.propertiesService.get(arrayParams).subscribe((data: any) => {

        }), (err) => { console.log("timeoout")};

get(stringParams) {

    return this.http
      .get(`${API_URL}/properties/?${stringParams}`, this.options)
      .timeout(50)
      .map((response: Response) …