标签: ionic2

我正在开发一个 Ionic2 应用程序，使用 cordova-plugin-network-information，我从我的 app.ts 订阅连接和断开连接事件，并希望能够将对我的 NavController 的引用和加载组件传递到订阅中() 回调，因此每当断开连接事件触发时，我都可以在 UI 顶部向用户显示正在加载的叠加层。我看到在回调中对“this”对象的引用更改为名为“SafeSubscriber”的对象，我认为这是其 Observer 对象的 rxjs 类型类，我这里遇到的问题是我无法获取这些对象使用 Chrome DevTools 将 app.ts 中可用的实例添加到回调内的此代码中，我也无法找到离开此上下文的方法来访问 App 对象本身。

这是我的代码：

    ngOnInit()
    {
      // Nav Controller:
      this.nav = <NavController>this.app.getComponent('nav');

      // Disconnect Detection
      let disconnectSubscription = Network.onDisconnect().subscribe(() =>
      {
          console.log('Disconnect Detected');
          // Push Loading into nav stack here...!
          // this.nav.present(this.loading);  <- no this object...
      });
    }

这是我在 Chrome DevTools 中查询“this”对象时得到的结果（这应该将其原始上下文保留在 lambda [粗箭头] 函数中，这是正确的吗？）

我尝试在订阅之前设置一个“that”对象，以便变量“this”不会干扰回调“this”范围，它在这种情况下不起作用，因为“that”是立即声明的当触发断开连接事件时，在 subscribe() （假设：any = this;）在回调内部未定义之前。

我知道这不是放置直接更改 UI 的代码的最佳位置，但我没有看到其他地方，因为我这里需要的是一个全局事件处理程序，只要没有检测到连接且用户没有连接，该处理程序就通过设置此覆盖来工作正在查看应用程序内的某些页面。

我认为应该有一个非常简单和优雅的解决方案，但我似乎无法找到它。有没有办法将参数传递给 subscribe() 函数？某种带有我需要的引用的对象？

提前致谢。

我正在ElementRefAngular2 (Ionic2) 中探索对象，但我无法控制 .css 文件的paddingCSS 属性ElementRef。

对于以下问题，我不会提供我的文件的详细信息：[我的项目]\src\app\app.component.ts 和 [我的项目]\src\app\app.module.ts。请假设这些工作正常。

我在 [my project]\src\pages\my-component\my-component.ts 下的一个组件中有此代码：

import { Component,  ContentChild, ViewChild, ElementRef } from '@angular/core';
import { NavController, Card, CardContent } from 'ionic-angular';

@Component({
    selector:'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponentPage {
    // @ContentChild("ionCard") ionCard:Card;
    // @ContentChild("ionCardContent") ionCardContent:CardContent;
    @ViewChild("ionCard") ionCard:ElementRef;
    @ViewChild("ionCardContent") ionCardContent:ElementRef;
    constructor(public navCtrl:NavController){

    }
    ionViewWillEnter(){
        console.log("ionCard: ", ionCard);
        console.log("ionCardContent: ", ionCardContent);

    }
}

然后在 [我的项目]\src\pages\my-component\my-component.html 中的这个 html 模板，我有：

<ion-header>
...
</ion-header>
<ion-content >
  <ion-card #ionCard>
    <ion-card-content …

大家好，

有谁知道Ionic2 的Storage 和 LocalStorage有什么区别？读的时候不是很清楚。请给我解释一下。

提前致谢。

我正在开发一个离子2应用程序,它基本上是一个购物车,Woocommerce作为后端.使用REST API,情况非常顺利:我可以在应用程序中浏览产品并为客户创建订单.

但现在我陷入了支付处理的困境.该应用程序将只使用PayPal,并且我想使用PayPal插件.我还没有测试过,但看起来非常简单:你传递购买细节(价格,货币,描述......),然后渲染PayPal用户界面.

我可以向PayPal用户界面提供所有这些信息,但它有一个显而易见的问题:如何将其与相关的Woocommerce订单集成？如果支付成功,我如何做到这一点,Woocommerce注册它？

Woocommerce安装已启用PayPal.你可以在网站上使用PayPal就好了.

现在,我很确定它与PayPal的IPN有关.猜测一下,也许我应该以某种方式将订单ID传递给PayPal插件,那么IPN会将同样的订单ID传递给Woocommerce吗？可能是类似的东西,但我找不到适当的文件.

如果你搜索"离子2 woocommerce paypal",你会看到很多人出售相同的东西的源代码.我可以买一个并研究它,但我宁愿找到关于这个特定动作的文档.

是否可以在离子选择中添加图标到ion-option？就像是

<ion-select  name="type">
        <ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
        <ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
      </ion-select>

我正在使用简单的 HTML、CSS 和 Angular 开始一个新的 Web 应用程序项目。我们正在使用现有的 Web 服务从某些服务器检索数据，我们尝试使用的一项服务是公共服务：全球天气 SOAP 服务

有没有一种“简单”的方法可以用 Angular 提出请求？实际上我们的“测试”代码是这样的（使用 JQuery，仍然不起作用），但是使用 HTTP 或 RxJS 实现 Angular 方法会更好......

import { Injectable } from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class SoapServiceProvider {

    constructor() { }

    testingSoapRequest() {

        $.ajax({
            url: 'http://www.webservicex.net/globalweather.asmx?op=GetCitiesByCountry',
            data: { CountryName: 'Spain' },
            success: (data) => {
                console.log('Hey, we got a success response', data);
            },
            error: (err) => {
                console.error('We got an error :(', err);
            }
        });

    }

}

我从来没有使用过 JQuery …

使用Ionic Tabs文档中tabs.ts中的select（）方法进行了尝试。但是似乎当我尝试运行它时，它说“ select is undefined”，当我尝试使用console.log（tabs）时，我发现viewChild实际上为空/未定义。尝试搜索未定义viewChild的原因，但无法真正理解为什么。

链接到离子选项卡文档：https : //ionicframework.com/docs/api/components/tabs/Tabs/

tabs.html

<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabTitle="Request" tabIcon="alert"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="detailParam" tabTitle="Pending" 
   tabIcon="repeat"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Completed" tabIcon="done-all"></ion-
   tab>
  <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="person"></ion-tab>  
</ion-tabs>

tabs.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, AlertController, Tabs } from 'ionic-
angular';
import { PendingJobPage } from '../pending-job/pending-job';
import { CompletedJobPage } from '../completed-job/completed-job';
import { RequestPage } from '../request/request';
import { ProfilePage } from '../profile/profile';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage …

我在 IONIC 3 中实现了谷歌地图。

在 Android 上，它运行良好。当我在 IOS 上运行它时，它会加载地图，但是当我对其执行任何操作（例如缩放/拖动）时，我收到Connection: waitForSyncReply: Timed-out while waiting for reply错误消息。

我尝试了很多方法来去除离子卡中的边框，但都没有成功。请帮我。这是我的 css 文件：

   page-home {
     ion-card, .card-ios, .card-md {
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
        position: relative;
        text-align: center;
        // border-top: 3px solid colorofyourchosing
      }
      .card{
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
      }    }

这是我在 home.html 中的 html 代码

            <ion-card>
              <img (click)="goEnvi()" src="assets/imgs/envi.svg"/>
              <h6>{{"Enviroment" | translate}}</h6>
            </ion-card>

谢谢

我试图避免在 ionic 4 中双击或双击按钮，因为它应该只在单击时触发操作。如果我双击，我希望一个动作被触发一次而不是 2 次。我尝试了几个选项，例如禁用按钮、settimeout，但没有任何效果。在寻找更好的解决方案时，我发现许多论坛都建议在 Angular 中使用 debounceTime。

我遵循了如何防止在 Angular 中双击？并尝试创建一个指令，但单击“debounceClick”会出现以下错误。

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'debounceTime' since it isn't a known property of 'button'. ("
</ion-content>

<button appIonCLick (debounceClick)="log()" [ERROR ->][debounceTime]="700">Throttled Click</button>

以下是我创建的指令

import {
  Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit,
  Output
} from '@angular/core';
import { Subject } from 'rxjs';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';


@Directive({
  selector: '[appIonCLick]'
})
export class …