angularの[ngClass]や[disabled]が複雑な条件の場合に関数化してみた
これはionicでangularを使って、ゲームブックアプリを開発している連載ですが備忘録的な話です。
ionicとangularの組み合わせは本当に色々便利です。
例えば、たくさんの入力項目があって、前回の入力から変更があった場合に『保存ボタン』を有効にしたい場合、以下のように[disabled]="条件式"を使います。
<ion-button (click)="fnSaveBtn" [disabled]="A==preA">保存</ion-button>
この場合、"A"と言う双方向バインディングされた入力値と前回の入力値である"preA"を比較して同じなら保存ボタンを押せないように無効化しています。
入力項目を変えただけで有効無効が切り替わり便利ですし、画面に複数の項目があったとしても条件式(この場合は"A==preA"）を追加してやれば拡張可能です。
ただ問題はhtmlは複雑な条件式を書くのに向いていないという事です。
そこで、条件式自体はtrueかfalseのいずれかになればいいので、trueあるいはfalseを返す関数を作り、条件式に関数名を書く事にしました。
home.page.ts側
------------------------------------------
fnChkDisabled(){
let rtn=false;
if(this.A==this.preA){
rtn=true;
}
return rtn;
}
------------------------------------------
home.page.html側
------------------------------------------
<ion-button (click)="fnSaveBtn" [disabled]="fnChkDisabled()">保存</ion-button>
------------------------------------------
これによりhtml側はシンプルになり、判定条件の方もコメント等も含め判りやすくなりました。
次に[ngClass]ですが、こちらは"動的に"HTML要素に対してCSS用のクラスの設定を行うための機能です。
複数のCSSクラス設定を条件(動的に判定される)により行えるので、凝ろうと思えばいくらでも凝れそうな機能ですが、html側に複雑怪奇な書き方をすると解読も修正も困難になります。
ですのでこちらも関数化しましたが、関数が返すのブーリアン値ではなく以下のようなオブジェクトであることに注意です。
home.page.ts側
------------------------------------------
fnNgClassFrame(){
const objNgClass={
css1:this.UseCss1,
css2:this.UseCss2,
css3:this.UseCss3
}
return objNgClass;
}
------------------------------------------
home.page.html側
------------------------------------------
<div id="container" [ngClass]="fnNgClassFrame()">
------------------------------------------
css1～3は、home.page.scssで定義したcssクラス、this.UseCss1～3はそれらのCSSクラスを使用するかどうかのブーリアン値です。
こちらもバインディングされたデータと連動できるかもしれませんが、そこまでは試していません。
もう一つ注意点としてはobjNgClassの最後の項目"css3:this.UseCss3"の末尾に"，"をつけてはいけない事です。エラーが出ますのでご注意を！
以上、備忘録でした。
