Ionic-Angular筆記

前言

和react比，地雷太多了

但可以用sass是個優點，只是預設style要用點腦筋去更新...

先生成App架構

ionic start {{name}} blank

基本思維相當webapp: router到不同的page，page再經navigator拉parameter(如有)，搭配component等顯示內容、進行不同操作

所以接下是怎樣加各組件:

統統用指令(ionic generate)加

指令export/import modules那些會給你處理(自己去處理delcartion不是新手做的事啦)

生成Ionic Page + Ionic/Anuglar Component | Service | Pipe | Controller

ionic g [page/component/service/pipe] {{name}}

Page和component大致相同，html做template、scss寫style、ts行scripting

angular行typescript，但除了typing習慣了ES6 class應該沒問題(旁白:沒有這樣的事)
template基本上ng-template、html、ionic-*，只是header的code要放<ionic-header>、scroll content放<ionic-content>
style有點特別，戴入順序
```
variables.scss (自定各種variable和override ionic component的variable) -> app.scss (各個page會共用的style) -> page-\*.scss
```
要注意的是page的style scope就只在page-* {}，寫在外邊的就算是同個file也是global style (wryyyyyyyyy

Page有自己的Lifecycle(v3/v4 大致相同懶人包）

要自己在contructor拉要用的Controller和Service

Push

DidLoad -> WillEnter -> DidEnter

Pop

WillLeave -> DidLeave -> WillUnload

enter/leave 系列每個navigation call必定發生，load/unload 系列只有在memory載入/卸除那一頁時才會

Ionic 3用的component要用Angular component的lifecycle來管，要到Ionic 4他們才吃IonicPage系列的Ref

component lifecycle要implements相應的interface

init

first @Input -> ngOnChange -> ngOnInit

Change Occur (if using OnChange)

changes -> ngOnChange()

Per Check cycle (if OnChange can't handle)

ngDoCheck()

注:

神奇的是用指令生成的component (components/底下那堆) 預設可能沒import Ionic的component，要自己改components.modules.ts的import (*Ionic的component收在IonicModule)
OnChange超廢的，===測不出來的變動就要用DoCheck，DoCheck用起來不會比scroll event好一點Ref，慎用
因為OnInit之前會行一次OnChange，如果是要每次更新也行的overriding其實用OnChange比OnInit好
因為Ionic 3不吃Page那套所以頁面刷新除了搞rxjs那套外就只能用page lifecycle生點數值再餵component踢他刷新...

template基本是html，也可以搞hyperlink (Ionic v3/v4不一樣)

每個page/component有自己的selector，<selector>，SCSS、template (HTML/string)
template {{}} 中可用大多數的this.property 和一些JS
- interpolation 塞HTML會吐string，要找能處理的directive (ngx-template之類的)
Page的Input用router parameter搞(Ionic v3/v4不一樣)，Component的Input在TS用"@Input(alias) attr;"定義，template用[alias or attr]塞
- Input [input-attr]="" & Output (output-attr)="doSomething($event)"吃property, string要加引號('') => [input-attr]="'it is a string'"
Component的@Output基本都是event emitter(名字常用eventName，例如Ionic自己的ionChange)，template用(eventName)給handler，預設吃(click($eventObj))這類簡單event，所以除非component有什麼要broadcast的不用特別寫output
要改component的class attribute等等host element的事情的請洽 @HostBinding('class') class = "..."

*ngIf/*ngSwitch做conditional rendering
*ngFor做Looping
含有*ng系列的那個element也會一起render (as container)，如果不想container也render請改用<ng-container>
塞value給*directive或是[@Input] (@Output)標準是用"..."，...是個JS experession：property name會解出內容(不用this)，expression照一般JS辦(context是this)
如果需要更詳細的template操作/child template請去爬<ng-template> (比如說用[ngIf]配local variable做if-then-else clause)
如果要像react吃component的innerHTML請研究<ng-content>和content projection[ref]，看過這篇還不錯ng-content: the hidden doc
其餘去爬貓紙就好cheatsheet
- local variable可以當是id or ref (react) 來操作指定component
- 有2-way data binding但除非是ngModule否則可免則免
- attribute不加[]是把attribute value當string，要JS expression結果要binding [attr.target-attr], [ngClass] & [ngStyle]

imports (scope限同ts，templateUrl是放外面看不到)
const & variable (scope限同ts，templateUrl是放外面看不到)

@decorators
class {...}
export

注意template如果用templateUrl戴入的話是叫不出this以外的東西

除了template和component實在沒有太多要用angular的地方

想到可能會再寫...