标签: ionic2

我是Ionic 2的新手,我阅读了Ionic 2文档并认为这段代码可行.它应该在更改时返回当前选择值并将其打印到控制台.

page.html中

<ion-select #C ionChange="onChange(C.value)"> 
                    <ion-option value="a">A</ion-option>
                    <ion-option value="b">B</ion-option>
</ion-select>

page.ts

public CValue:String;
onChange(CValue) {
     console.log(CValue);
}

但是控制台没有给出与此相关的任何内容.我错过了约束中的某些内容吗？

Page在呈现之前获取数据异步的正确方法是什么？

Angular2@CanActivate据我所知,建议装饰者.可悲的是,这不适用于Ionic2,至少不适合我和其他人

显然Ionic2是与@CanActivate装饰者做了一些事情, 但是看来它没有记录,我无法弄清楚它究竟做了什么.

然而,由于离子学缓存,这个人指出应该Ionics View States反正使用.他的例子如下:

  onPageWillEnter() { 
      return this._service.getComments().then(data => this.comments = data);
  }

看起来他期待Ionic考虑返回的承诺,但是快速浏览一下 Ionics消息来源(至少我认为是这样)会忽略返回的值.因此,无法保证在呈现页面之前解析promise .这是onPage*的示例,以及它如何根据需要/预期执行.

所以我迷路了,一个人如何完成这个简单的任务呢？

在第一个链接中,建议在导航到页面之前解析数据,这会增加被调用者页面所需数据的知识.在我看来,这不是一个选项.

*编辑:添加负面示例

我的离子2 /角度2应用程序有问题.

我得到了一个应用程序,其中"auth"部分是实现的.

代码如下所示:

 import {Nav, Platform, Modal, ionicBootstrap} from "ionic-angular";
import {NavController} from "ionic-angular/index";
import {StatusBar} from "ionic-native";
import {Component, ViewChild} from "@angular/core";
import {AngularFire, FirebaseListObservable, FIREBASE_PROVIDERS, defaultFirebase} from "angularfire2";
import {HomePage} from "./pages/home/home";
import {AuthPage} from "./pages/auth/home/home";

@Component({
  templateUrl: "build/app.html",
})

class MyApp {
  @ViewChild(Nav) nav: Nav;

  authInfo: any;
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(private platform: Platform, private navCtrl: NavController, private af: AngularFire) {
    this.initializeApp();

    this.pages = [
      { title: "Home", component: HomePage } …

我想设置100%宽度的离子选择.

我试过像这样的css类:

.mySelect { width: 100% !important; }

但它没有用.

我在工作中ionic 2 beta 11的IOS平台上运行使用的应用程序后ionic run ios一white screen出现,得到了以下信息:

Native: deviceready did not fire within 2000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.

有什么建议吗？究竟是什么问题？

如何处理Ionic 2上的后退按钮动作？

我希望能够知道该做什么,具体取决于向用户显示的页面.

我没有找到这个问题的好答案,但过了一段时间我发现自己有办法做到这一点.我要和大家分享一下.

谢谢

就在我认为我控制了打字稿中的打字时,我遇到了证明相反的事情.

这次我试图使用jwt-decode.我已经通过命令安装了类型定义typings i dt~jwt-decode --save

两个问题

1.当我看进index.d.ts我看到下面的

    declare module 'jwt-decode' {
        namespace JwtDecode {
        interface JwtDecodeStatic {
            (token: string): any;
        }
    }

    var jwtDecode: JwtDecode.JwtDecodeStatic;
    export = jwtDecode;
    export as namespace jwt_decode;
    }

IDE(VS代码)在最后一行下显示错误"[ts]全局模块导出可能只出现在顶层"export as namespace jwt_decode;

2.如何导入？

我尝试导入声明..

   import { ??  } from 'jwt-decode';

但我看不到要导入的任何内容.

我能找到的其他(很多)例子似乎都没有帮助.它必须简单,我只是不知道语法.

在此先感谢您的帮助.

[更新]经过多次阅读后,看起来打字已经被npm取代了.

所以我试过了

npm install --save jwt-decode
npm install --save @types/jwt-decode

// and import via
import * as JWT from 'jwt-decode';

但仍然无法正确导入它.

[UPDATE2]我可以添加语句let …

我在Ionic 2的屏幕上有2个按钮,我想在屏幕中间(水平和垂直对齐)将它们对齐在一起(一个在另一个上面,但在一起).

我想使用离子网格,无填充,边距,浮点数或百分比.

所以我有这个

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <button>button 1</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <button>button 2</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

随着<ion-col text-center>我可以水平对齐它们到中心,但是对于垂直对齐我不能看到任何东西,我可以申请,所以我尝试这样做:

ion-grid {
  justify-content: center;
}

但什么都没发生.我检查过,这是应用于页面,但由于某种原因它不起作用.有任何想法吗？

我尝试滚动到固定位置,例如scrollTo(500,20).假设您使用的设备宽度为300像素.滚动目标现在已超出屏幕范围,您必须向右滚动.

我通过以下方式解决了这个问题:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

到这里一切都很好.如果我想通过按下按钮向右跳500像素,问题就开始了.向右滑动即可.我知道有一个功能可以做到这一点<ion-content>:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500); 

不幸的是,这不适用于我的情况.我认为问题是内容与设备大小有关,因此scrollTo()方法不会生效<ion-scoll>.如何使用scrollTo()方法<ion-scroll>代替<ion-content>？

谢谢你的帮助!

我有问题使用本机音频cordova插件与离子.我使用npm安装了native

sudo npm install --save @ionic-native/native-audio

并添加了一个名为smartAudio的新提供程序(下面附带代码).它在离子网络视图和iOS模拟器/真实设备上都像魅力一样......但由于某些原因,Android模拟器/真实设备上根本没有声音.

我有一个离子幻灯片元素,使用*ngFor生成图像幻灯片,像这样 -

<ion-slides (ionSlideDidChange)="muteAnimalSound()" pager dir="rtl" [loop]="true" >
  <ion-slide *ngFor="let slide of animals_slides; let i = index" style="background-color: white">
    <img src="{{slide.img_url}}" (click)="playAnimalSound($event)">
    </ion-slide>
  </ion-slides>

playAnimalSound()函数看起来像这样 -

playAnimalSound(ev) {
    let animalSound = this.getAnimalBySource(ev.target.src);
    let currentIndex = this.slides.getActiveIndex();

    this.smartAudio.preload(currentIndex, animalSound[0].sound_url);
    this.smartAudio.play(currentIndex);
  }

我的smartAudio提供程序是这样定义的 -

export class SmartAudio {

    audioType: string = 'html5';
    sounds: any = [];

    constructor(public nativeAudio: NativeAudio, platform: Platform) {

        if(platform.is('cordova')){
            this.audioType = 'native';
        }
        //testing atlassian sourcetree

    }

    preload(key, asset) {

        if(this.audioType …