角度指示におけるビルディングの理解‐第1部

今日、我々は、角度が提供する内蔵の指示を学びます.
ダイビングの前に、私たちはdirective .
角の定義に従って-

Directives are classes that add additional behavior to elements in your Angular applications

だから今では理解する簡単な言葉にそれを破ることができます.通常のHTML要素/タグul li は、いくつかのテキストを弾丸形式で表示するために使用されます.エ.

<ul>
    <li>83</li>
    <li>32</li>
    <li>66</li>
</ul>

テキストは以下のように表示されます

それは条件に基づいてCSSのクラスやスタイルを追加するような余分な能力を持っていない、特定の条件などに基づいてアイテムを表示/非表示にします.
通常のHTML要素に余分な力を与えるために、角度は指令の概念を導入しました.それは内部/シーンの背後にあるすべてのトリック/魔法を行うクラスです.
だから角度で利用可能な様々なディレクティブを理解するためにダイブすることができます.
3つの異なるタイプの指示があります.

コンポーネントディレクティブ- (最後にそれについて話をするでしょう)

属性指示

NGCLASS

名古屋工業大学

NGModel

構造指令

国立天文台

生物研

NGswitch

属性指示
HTML要素の属性の動作を変更するディレクティブ.CSSスタイルのCSSクラスなど.
NGCLASS
このディレクティブは、条件に基づいて追加された要素のCSSクラスを追加または削除します.
練習で見ましょう.
プロジェクトを作成し、コンポーネントを作成するattributeDirectiveDemo . あなたが角成分についてよく知らないか、1をつくる方法でないならば、私はあなたに以下の関連を通過するよう提案します
ngclassディレクティブを使用する別の構文があります
A . NGClassディレクティブに直接クラス名を渡す[ngClass]="'<class name>'"Step 1 CSSクラスをCSSファイルに追加する

上記のイメージの矢印で示されたファイルで、以下のCSSコードを置くことができます

.success {
  color: green;
}

.error {
  color: red;
}

これらは2つの単純なCSSクラスですsuccess and error . 成功クラスを使用するとテキストが緑色になります.エラークラスは、テキストを赤で色付けします.
Step 2テンプレート/HTMLファイルでディレクティブを使用します
HTMLファイルを開き、以下のコードをペーストします

<div [ngClass]="'success'">Server One</div>
<div [ngClass]="'error'">Server Two</div>

アプリケーションを実行し、Localhostに移動したら、次のように出力します

今すぐHTMLファイルで書いたコードを理解できます.
すべての属性ディレクティブは[] 正方形ブラケット.ディレクティブ名は、四角形ブラケット内に配置されます.次に等しい= 演算子にはクラス名が続きます.クラス名success/ error をダブル引用符で囲む" シングル引用' .
ここで引用符の順序は重要ではありません.また、使用することができます

<div [ngClass]='"success"'>Server One</div>

しかし、以下のコードのように書くべきではありません.

ダブルクォートのペアを使用して、以下のようにクラス名を書きます.

<div [ngClass]="success">Server One</div>

その後、角度は、コンポーネントtsファイル内の変数/プロパティとして成功を考え、エラーをスローし、期待通りに動作しません.
B .条件に基づいてCSSクラスを適用する[ngClass]="{ <class_name>: <condition> }"STEP 1
さて、コンポーネントのtypescriptファイルを開き、変数を追加しますserverOneStatus と値を初期化します.

ステップ2
次に、コンポーネントHTMLファイルを開き、次のコードを入力します

<div [ngClass]="{ success: serverOneStatus === 'up' }">Server One</div>

今すぐブラウザでアプリケーションを開くと、以下の出力が表示されます.成功のクラスが正しく適用されているので、テキストは緑色になっている.

そこで、上記のコードでは、変数serverOneStatus upの値を持っています(値を上げてTSファイルの変数serveronestatusを初期化したことを覚えておいてください).条件がtrueに評価され、CSSクラスsuccess が適用されます.
複数条件の適用
ngclassディレクティブに複数の条件を渡すこともできます[ngClass]="{
<Class_1>: <Condition_1>,
<Class_2>: <Condition_2>
}"そこで、ここでは1つのクラスによって分離された状態と一緒にもう一つのクラスを追加しています, . どの条件がtrueに評価されるかに応じて、対応するクラスが適用されます.両方の条件がtrueになる場合、両方のクラスが適用されます.
それがどのように我々のコードで実装されることができるかについて見ます

<div
  [ngClass]="{
    success: serverOneStatus === 'up',
    error: serverOneStatus === 'down'
  }"
>
  Server One
</div>

だからここで余分なクラスと余分な条件を追加error: serverOneStatus === 'down'今では全体のものを理解するserverOneStatus 価値があるup 次に、成功クラスを追加し、変数が値を保持する場合down 次に、NGClassが使用される要素にエラークラスを追加しますdiv .
d . 3進数演算子をNGCLASSに渡す
三項演算子を使用して条件を渡すこともできます.[ngClass]="<codition> ? <'Class_Name1'> : <'Class_Name2'>"したがって、コンポーネントHTMLファイルを開き、以下のコードを追加できます

<div [ngClass]="serverOneStatus == 'up' ? 'success' : 'error'">Server One</div>

ここでは、三項演算子を渡します.コンディションをチェックしていますserverOneStatus == 'up' trueに評価し、成功クラスを他のクラスに追加します.
今ブラウザで表示される場合は、テキストが緑色に表示されます.
それはすべてこの部分です.
このセクションでは、ディレクティブの基本概念を学びました.
今後の投稿の残りのディレクティブをカバーします.
滞在を調整.
閉じるこの動画はお気に入りから削除されています.
チアーズ!
ハッピーコーディング