補記⑦ constructor()とngOnInit()、クラス変更による動的デザイン変更
知見ばかり増えて、肝心のアプリ開発が進まない今日この頃です。
(そろそろ経験2か月目)
まず、昨日のローカルストレージをあれこれ試していた内に使ってしまっていたngOnInit()から始めます。
前にも書いたと思いますが、アプリ開始時に動くconstructor()の中では、html要素関係の作業は出来ません。
(constructor()を抜けてから、要素が実態として存在するイメージだと思います。)
ただしconstructor()を抜けてすぐにhtmlが表示されるわけでは無く、その手前に記述するイベントngOnInit()と言うイベントが初期の画面デザインに効果がある訳です。
(例えば、今日が月曜なら背景青にしようなど)
"src\app\home\home.page.ts"に記述するわけですが使い方は以下の3点を守る事です。
①import { Component, OnInit} from '@angular/core';
'@angular/core';からのインポートで"Component"以外に"OnInit"を加える
②export class HomePage implements OnInit{
クラス宣言部分で"OnInit"の実装を宣言する(要は使いますよと断りを入れる)
③クラス内部に” ngOnInit(){}”関数を書く
この中で初期デザイン等を設定するわけです。
さて、次に動的デザイン変更ですが、ID：'container'に対してクラスを適用する事でうまく(少なくとも私のやりたいように)動的デザイン変更が出来ました。
（追記：ion-text-areaなどコンポーネントに対してはel.style.textAlign="left";と言う形を使わざるを得ないかも？)
"src\app\home\home.page.scss"にデザイン定義した複数のクラスを用意して'container'のクラスを動的に変更します。
"background-color"と"--ion-background-color"が混在しているところがミソと言えばミソかも？
"src\app\home\home.page.scss"
------------------------------------------
.clsLeaf{
background-color: red;
--ion-background-color: aqua;
--ion-item-background:aqua;
}
.clsMetal{
background-color: aqua;
--ion-background-color: red;
--ion-item-background:red;
}
------------------------------------------
"src\app\home\home.page.ts"
------------------------------------------
fnClickCell(eventID:string){
let el = document.getElementById('container');
if(el.className=="clsLeaf"){
el.className="clsMetal";
}else{
el.className="clsLeaf";
}
}
------------------------------------------
