角度指令の組込みを理解する-パート2

今日、我々は残りのビルトイン指令を角度で理解するために、我々の旅行を続けます.これは前回の続きです.
ここでの使用を理解するngStyle ディレクティブ.
NGStyleは1つ以上のインラインスタイルをタグに追加します.
使用のバリエーションは少ない.
a .オブジェクトリテラルをNGStyleに割り当てる

[ngStyle]="{<Valid_Style>}"
e.g. 'background-color':'green'

今すぐ練習でそれを試してみましょう.同じコンポーネントテンプレート/HTMLファイルを開きます

以下のコードでペーストする

<div [ngStyle] = "{ background: 'green' }" >
  This text will have a background green...
</div>

ブラウザでプロジェクトを開くと、以下の出力が表示されます.

さあ.コードを理解できます.以来ngStyle は、私たちが私の最後で説明されるように、角のブラケット[]の中にそれを囲む属性指示です= ダブル引用符の中にオブジェクトが続きます" または単一引用符' (両方ともうまくいきます).
オブジェクトは有効なCSS規則でなければなりません.此処ではbackground プロパティ名と対応する値は緑色です.
だからここにdiv でngStyle 緑色の背景になっています.
b .条件を通過することによってインラインスタイルを適用するngStyle [ngStyle]="{'< CSS STYLE PROPERTY >': < CONDITION > }"これで、コードを同じように実装できます.したがって、以下のコードで同じコンポーネントHTMLファイルとペーストを開きます.

<div
  [ngStyle]="{ 'background-color': 
serverOneStatus === 'up' ? 'green' : 'red' }">
  SERVER 1
</div>

を返します.あなたが変数を持っている必要がありますTSファイルserverOneStatus 我々は以前の投稿で作成しました.覚えてる?

それで、ブラウザに行けば次の出力が表示されます-

そして、あなたがserverOneStatus それ以外の値は、以下の出力を行います.

ここで、条件serverOneStatus === 'up' はtrue 背景は緑色であり、それが偽の背景である場合は赤です.
c .スタイルオブジェクトを返す関数を呼び出すことで[ngStyle]="<function()>"このため、コンポーネントに関数を追加する必要があります.スタイルオブジェクトを返すtsファイル.コンポーネントを開くことができます.TSファイルと以下のコードを追加します.

  getStyle() {
    return {
      'font-size': '20px',
      'color': 'gray',
      'background': 'lightgreen'
    };
  }

それで、あなたの構成要素.TSファイルは以下のようになります

export class AttributeDirectiveDemoComponent implements OnInit {

  serverOneStatus = 'up1';

  ngOnInit(): void { }

  getStyle() {
    return {
      'font-size': '20px',
      'color': 'gray',
      'background': 'lightgreen'
    };
  }
}

HTMLファイルで以下のコードを書く必要があります.

<div [ngStyle]="getStyle()">SERVER 1</div>

ブラウザを開くと、以下の出力が表示されます.

ここでは、関数からスタイルオブジェクトを返すだけですgetStyle テンプレートから関数を次のように呼び出す[ngStyle]="getStyle()"この方法では、同時に複数のスタイルを設定することもできますし、また、コンポーネント内のいくつかの条件を直接記述できます.tsファイル.
それで、それはすべてですngStyle .
我々は、今後のポストで他のビルトイン角度指示について学びます.だから…….
あなたがポストを楽しんだという望み.お友達とコメントして共有してください.)
チアーズ!
ハッピーコーディング