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 配列){
  ...
} 

でいける

###タイプスクリプトの作法
http://www.buildinsider.net/language/quicktypescript/01

###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の問題じゃないけど） テキストエディタとかなにか開いてるときに更新起こそうとするとこのエラー起きる。
開いてるファイル全部閉じよう