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 });


###  カレンダーの使い方
https://forum.ionicframework.com/t/any-calendar-plugin-for-ionic-2-solved/75872


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

htmlにボタンを置く
<button ion-button (click)="toggleSpinner()">spinner</button><br />

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の使い方
http://tech.pjin.jp/blog/2016/11/19/create_ionic_app_7/

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