Angular のディレクティブをご存知ですか? angularjsの3つのディレクティブ命令の詳細な説明は次のとおりです。

この記事では、angularjs の 3 つの命令タイプを主に紹介します。この記事では、これら 3 つのタイプについて説明します。また、これらの 3 つのタイプの使用方法は次のとおりです。それでは、一緒に見てみましょう

Angular2 には、次の 3 種類のディレクティブがあります: 1
属性ディレクティブ - 要素の表示と動作を変更するディレクティブ。例: NgStyle… 2
。 構造ディレクティブ - DOM 要素を追加および削除することで DOM 構造を変更するディレクティブ。例: NgFor、NgIf … 3
コンポーネント — テンプレートを保持するディレクティブ。

1. 属性命令 (ngStyle、ngClass)

NgStyle

CSS 属性名: value のような形状を持つオブジェクトをバインドします。ここで、value は特定の CSS スタイルです。例:

<p></p><p></p>

Note

ngStyle の説明では、背景色には一重引用符を使用しますが、色には使用しません。どうしてこれなの？ ngStyle のパラメータは JavaScript オブジェクトであり、color は有効なキーであるため、引用符は必要ありません。ただし、背景色では、文字列でない限りオブジェクトのキー名にハイフンを使用することはできないため、引用符が使用されます。一般に、絶対に必要な場合を除き、オブジェクト キーの前後に引用符を使用しないようにしてください。 //動的使用

<span>{{ color }} text</span>

//判定追加

<p></p><p></p>

<p></p>NgClass

複数のクラスを同時に追加または削除するには、NgClassコマンドを使用します。 NgClass は、CSS クラス名: value の形状でオブジェクトをバインドします。value の値はブール値です。値が true の場合、対応する型のテンプレート要素が追加され、それ以外の場合は削除されます。
//基本的な使い方

 <p>此时p不包含bordered 类名</p>
 <p>此时p含有bordered 类名</p>

//判断

 <i></i>

<p></p>

2. 構造命令(ngIf、ngFor、ngSwitch)

Ng

ブール型へのバインディングを指定する場合式では、式が true を返す場合、要素とそのサブ要素を DOM ツリー ノードに追加できます。それ以外の場合、それらは削除されます。
式の結果が false 値を返した場合、要素は DOM から削除されます。

ここにいくつかの例があります: <p></p>

<p></p> //不显示
<p> b"></p>//
<p></p> 
<p></p>

NgFor

NgFor 命令は、特定の操作を繰り返し実行してデータを表示できます。 NgFor ディレクティブはオプションのインデックスをサポートします。 その構文は *ngFor="let item of items" です。
let item 構文は、items 配列内の各要素を受け取る (テンプレート) 変数を指定します。
items はコンポーネント コントローラーからの項目のコレクションです。

this.cities = ['厦门', '福州', '漳州'];
<p>{{ c }}</p>

インデックスの取得 配列を反復処理するとき、各項目のインデックスも取得したい場合があります。

ngFor ディレクティブの値に let idx = Index という構文を挿入し、セミコロンで区切ってインデックスを取得できます。

<p>{{ num+1 }} . {{ c }}</p>

結果は以下の通りです: 1.

この状況に遭遇した場合は、次のように ngIf を複数回使用できます:

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

この状況のた​​めに、Angular は ngSwitch ディレクティブを導入しました。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
AngularJS 開発マニュアル にアクセスして学習してください)

NgSwitch: 制御条件を返す値式にバインドします NgSwitchCase: 一致条件を返す値式にバインドします
NgSwitchDefault: デフォルト要素をマークするために使用される属性 (オプション)。これを使用しない場合、myVar が期待値のいずれにも一致しない場合、何もレンダリングされません
。

ngSwitch ディレクティブを使用して、上記の例を書き換えます。 <p></p>

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

3. コンポーネント

属性ディレクティブの作成には、@Directive デコレーターで装飾されたコントローラー クラスが少なくとも 1 つ必要です。 @Directive デコレーターは、このディレクティブに関連付けられた属性の名前を示すセレクター名を指定します。

次に、単純な属性タイプのディレクティブの作成を開始します。このディレクティブの機能は、user-quote-view.component.html ページが更新されたときに .quote-area の最小の高さを取得することです。

1. まず、QuotationArea

<p></p>

がこのコマンドを属性として DOM 要素に適用することを確認します。つまり、このコマンドのホスト要素を見つける必要があります。 2. その後、次のコード構造で quoteArea.directive.tss ファイルを作成します:

import {Component, Directive, ElementRef, OnInit} from '@angular/core';
@Directive({ selector: '[quotationArea]'})
export class QuotationAreaDirective implements OnInit {

  el:ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }
  ngOnInit() {
    const $el = $(this.el.nativeElement);
    const windowHeight = document.documentElement.clientHeight; //获取窗口高度
    const bar=document.getElementsByClassName('bar-nav')[0]
    const barHeight =bar.clientHeight;
    const heightValue=windowHeight - barHeight;
    $el.css('height',(heightValue) + 'px');

  }
}

3. 次に、Angualr がテンプレートを解析するときに、独自に定義したディレクティブを明示的に宣言する必要があります。自分自身を正しく認識し、指示を設定すること。

rreee

結果は写真の通りです:

この記事はここまでです (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS ユーザーマニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください

。

以上がAngular のディレクティブをご存知ですか? angularjsの3つのディレクティブ命令の詳細な説明は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。