Angular でカスタム命令を作成する方法の詳細な説明

この記事では、Angular で命令の作成をカスタマイズする方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

# ディレクティブの概要

Angular には 3 種類のディレクティブがあります。

• コンポーネントにはテンプレート命令があり、コンポーネントは命令を継承し、クラスと UI 関連の属性を拡張するだけです。

• 属性タイプのディレクティブは、DOM 要素、コンポーネント、またはその他のディレクティブの動作と外観を変更するディレクティブです。たとえば、NgStyle、NgClass。

• 構造ディレクティブは、DOM 要素を追加または削除することによって DOM レイアウトを変更するディレクティブです。たとえば、NgIf、NgFor。

しかし、実際の開発では、ビジネスのニーズに応じて、ビジネス開発を容易にするために Angular コンポーネントの命令を拡張することがよくあります。独自のディレクティブを作成する方法を見てみましょう。 [関連する推奨事項: "

angular チュートリアル "]

属性タイプの命令を作成する

Angular では、属性タイプ命令を作成するには、少なくとも

@Directive デコレータを備えたコントローラー クラスが必要です。このデコレータは、ディレクティブに関連付けられた属性名を識別するセレクタ名を指定します。コントローラー クラスは、ディレクティブの機能的な動作を実装します。

次に、要素の上にマウスを置いたときに背景色を変更する簡単なコマンドを作成します。マウスが離れると背景色が消え、マウスをクリックするとフォント サイズが大きくなり、マウスがクリックされるとフォント サイズが大きくなります。マウスを放すと、フォントは元の機能に戻ります。

命令の実装

background-exed.directive.ts ファイルを作成し、次のコードを実装します:

import { Directive, HostListener, ElementRef, Renderer2, HostBinding } from '@angular/core';

@Directive({
  selector: '[appBackgroundExe]'
})
export class BackgroundExeDirective {

  @Input('appBackgroundExe')
  highLightColor: string;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    // 这种写法比较丑陋
    // this.elementRef.nativeElement.style.background = 'yellow';
    // 推荐这种写法， Renderer
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', 'yellow');
  }

  @HostBinding('class.pressed')
  isPressed: boolean;

  @HostListener('mouseenter')
  onMouseEnter(): void {
   this.highLight(this.highLightColor);
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.highLight(null);
  }

  @HostListener('mousedown')
  onMouseDown(): void {
    this.isPressed = true;
  }

  @HostListener('mouseup')
  onMouseUp(): void {
    this.isPressed = false;
  }

  private highLight(color: string): void {
    // this.elementRef.nativeElement.style.background = color;
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', color);
  }

}

その中の

selector: '[appBackgroundExe]' コンパイル時に Angular がこのディレクティブに関連付けられた HTML コードをテンプレートから見つけることができるように、ディレクティブに関連付けられた属性名です。

コンストラクターでは、

ElementRef モジュールと Renderer2 モジュールのインスタンスが挿入されます。 ElementRef を通じて、命令によって識別される DOM 要素を参照し、その要素に対して関連する操作を実行できます。また、Renderer2 によって提供される API を使用して、要素に対して関連するレンダリング操作を実行できます。

@HostListener と @HostBinding はプロパティ デコレータです。 @HostListener は、ホスト要素をリッスンするイベントを追加するために使用され、命令によってマークされた要素がホスト要素です。 @HostBinding は、ホスト要素の属性値を動的に設定するために使用されます。

フォント スタイルの設定

apliation.component.less

• .pressed {
    font-size: 30px;
  }

テンプレートでディレクティブを使用する

application.component.html

• <div class="panel panel-primary">
    <div [appBackgroundExe]="&#39;red&#39;">鼠标移进，元素变成红色。鼠标移出，元素红色消失</div>
  </div>

構造ディレクティブの作成

構造ディレクティブの作成は次のようになります。属性ベースの命令の作成。

命令の実装

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[appIf]'
})
export class IfDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef
    ) { }

    @Input(&#39;ifCreat&#39;) 
    set condition(condition: boolean) {
       if (condition) {
         this.viewContainerRef.createEmbeddedView(this.templateRef);
       } else {
         this.viewContainerRef.clear();
       }
    }
}

このうち、

TemplateRef は、埋め込みビューを作成できる埋め込みテンプレート テンプレート要素を表します。 ViewContainerRef は、1 つ以上のビューを追加できるビュー コンテナを表します。これを通じて、TemplateRef インスタンスに基づくインライン ビューまたはコンポーネント ビューを作成および管理できます。

テンプレートでのディレクティブの使用

application.component.html

• <div class="panel panel-primary">
    <div *ifCreate="&#39;true&#39;">hello</div>
  </div>

概要

この記事では主にAngularで作成命令をカスタマイズする方法を紹介します。実際の開発では、柔軟に必要な命令を作成することができます。

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。 ！

以上がAngular でカスタム命令を作成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。