Ionic2 で困ったことの解消法覚え書き #ionic2

初心者なので違ってたら指摘いただけると嬉しいです。
便利だけどあまり日本語docがないionicフレームワーク。
誰かが問題にぶつかったときの助けになることを願う覚え書き

ionicを始めたい場合

この方のチュートリアルがめちゃわかりやすい。
http://tech.pjin.jp/blog/2016/10/24/create_ionic_app_1/
http://tech.pjin.jp/blog/2016/10/25/create_ionic_app_2/

Ionic1 と Ionic2

ただのUpdate版かと思ったら全然違うものなので注意。
すげー有用な情報かと思ったらionicのころの情報だった、てこともある。
2017年3月現在とりあえずionic2使っておけば問題ない

ページ遷移できる

this.navCtrl.push(BodyPartSelectionPage, { text: "body part" });

各種イベント発行

タップ
<ion-card (tap)="tapEvent($event)">
深く押す(３Dタッチ対応？)
<ion-card (press)="pressEvent($event)">
ドラッグ
<ion-card (pan)="panEvent($event)">
スワイプ
<ion-card (swipe)="swipeEvent($event)">

新しいページを作成するとき

  ionic g page PAGE名

textに詰められた値を取得する

投げるとき

     this.navCtrl.push(BodyPartSelectionPage, { text: "body part" });

受け取るとき

     this.text = navParams.get("text");
     navParamsがparam取得系に使うやつっぽい

Htmlで使うとき

     {{  こうやってカッコで囲む }}

npm install

自分の環境で環境再構築 mvn installと近いかも

pickerにデフォルト値を持たせる

<ion-multi-picker id="default" [(ngModel)] = "default" item-content [multiPickerColumns]="dependentColumns"></ion-multi-picker>
tsにて、default = "la la land" との。

htmlから引数もってtsに飛ばす

this.navCtrl.push(InputWorkOutPage, { selectedPart: bodyPart });

カレンダーの使い方

ionic native の使い方

htmlとか書いて使うのかと思ったらそうじゃないみたい
メソッド呼ぶだけでやってくれるっぽい
これでプラグインをインストールする
ionic plugin add cordova-plugin-spinner-dialog

htmlにボタンを置く
spinner

tsファイルにメソッド書く

toggleSpinner(){
    if ( ! this.spinnerActive ){
      SpinnerDialog.show('たいとる', ' めっせーじ')
      this.spinnerActive = true
    }else{
      SpinnerDialog.hide()
      this.spinnerActive = false
    }
  }

typings install がエラーになる

typings: command not found

npm install typings --global これを打つと通る

新しい技術の習い方

まずは、usageでもなく「動く」demoソースを引っ張ってくる
写経する(コピペでいいけどね)
動かす
---ここまでが大事。ここまでをいかにミスなく行うかでモチベーションが変わる---
応用する

各種イベントの発行方法

  一回タッチする
  <ion-card (tap)="tapEvent($event)">
  強く押す(これ3Dタッチ対応してんのかな？)
  <ion-card (press)="pressEvent($event)">
  ドラッグする
  <ion-card (pan)="panEvent($event)">
  すわ
  <ion-card (swipe)="swipeEvent($event)">

ページロード時にメソッドを呼ぶ

   ngOnInit() {
        this.dcl.loadIntoLocation(
           this.component, this.elementRef, 'component-selector');
       }

ヘッダーの戻るボタンをなくす

this.navCtrl.setRoot(InputWorkOutPage,{})
(出したい場合はpushにする)

storageの使い方

連想配列のkeyに変数をいれる

別にionicだけに限らないけども。

var a ={};
var hoge = 'testosterone';
a.push(hoge,'benchpress'); //これだとhogeがkeyになる
a[hoge] = 'deadLift';      //これならtestosteroneがkeyになる

storage使用時は非同期で値がとられるよ。

だから値確認したいときはthen使って取得。

this.storage.get(this.date).then(result => {
      console.log(result);
    });

連想配列にkeyがあるかを探す

if(key in 配列){
  ...
}

でいける

タイプスクリプトの作法

Atomでメソッドジャンプしたい

goto-definition をインストールしよう。
http://qiita.com/yosuke0315/items/8e02a35ca47c56b15bc8

storageにセットした内容が即反映されないでござる、、、

→次の処理をthen内で書いてあげないと反映されないから注意

      this.storage.set(this.date, result).then(result => {
        this.navCtrl.push(InputWorkOutPage, {
          date: this.date,
          selectedPart: this.part
        });
      }

グラフ使いたいねん～

このデモをそのまま使おう。
http://valor-software.com/ng2-charts/
high-chartsは試行錯誤したがうまくつかえなかった。。
ionicからつかえないんじゃね～？

Cannot find name 'OnInit'. 'OnDestroy'.'ElementRef'.

単純コピペじゃだめだったよ
https://forum.ionicframework.com/t/cannot-find-name-ondestroy/72075

Error: ng2-charts configuration issue: Embedding Chart.js lib is mandatory

ionic serveやり直したらできた。何が原因かわからんが再起動推奨

TypeScriptでMap使う

宣言の方法はリンク参照
http://www.gesource.jp/weblog/?p=7670

error: cannot stat 'hoge/hoge': Permission denied

(Ionicの問題じゃないけど）テキストエディタとかなにか開いてるときに更新起こそうとするとこのエラー起きる。
開いてるファイル全部閉じよう