ionicとAngularによるWebアプリ開発 - 備忘録

＊重要＊

Angularのアップデートで、内容の一部が非推奨項目になっています。

[Angular] Angular v20 の変更点まとめ

https://qiita.com/ksh-fthr/items/0027538156c663b5342f

それに合わせた内容を、新しく書く予定ですが、この連載は停止とさせていただきます。

------------------------------------

この投稿には、以下の内容があります。

・動的なfunctionの呼び出し

１．動的なfunctionの呼び出し

Angularはデータとhtmlを結びつける(バインドする)フレームワークという事は知っていたのですが、javascriptにおけるデータには関数も含まれるわけです。

と言う事は単一のボタンのクリックで異なるfunctionを実行できるのでは？と思って実験してみました。

-----home.page.ts-----

artestFnc=[

function fnA(){

alert("a")

},

function fnB(){

alert("b")

},

function fnC(){

alert("c")

},

function fnD(){

alert("d")

},

]

iFn=0

---------------------

-----home.page.html-----

<ion-button color="primary" fill="solid" (click)="iFn=0">

SetA

</ion-button>

<ion-button color="primary" fill="solid" (click)="iFn=1">

SetB

</ion-button>

<ion-button color="primary" fill="solid" (click)="iFn=2">

SetC

</ion-button>

<ion-button color="primary" fill="solid" (click)="iFn=3">

SetD

</ion-button>

<ion-button color="primary" fill="solid" (click)="artestFnc[iFn].call(this)">

test

</ion-button>

---------------------

SetAからSetDのボタンを押してからtestボタンを押すと、それぞれ対応するfunctionが動くことが判りました。

使い道があるかはともかく、少々結果に驚きました。