Angular17 でのカスタム命令の使用方法の詳細な説明

今回は、Angular17でのカスタム命令の使用について詳しく説明します。Angular17でカスタム命令を使用する際の注意点について、実際のケースを見てみましょう。

1 HTMLとは

HTML ドキュメント は、HTML 要素、CSS スタイル、および JavaScript コードを含むプレーン テキスト ファイルです。HTML 要素はタグによって表現され、ブラウザーは各タグの属性を持つ DOM オブジェクトを作成します。ブラウザーはコンテンツをレンダリングします。これらの DOM ノードをレンダリングすることによって、ユーザーがブラウザーに表示するコンテンツは、ブラウザーが DOM オブジェクトをレンダリングした結果です。

2 指示の分類

コンポーネント、属性ディレクティブ、構造ディレクティブ

具体的な知識点については「Angular2 Revealed」をご参照ください

3 は、命令の定義で一般的に使用されるいくつかの定数を指します

3.1 指令

は、コントローラー クラスを修飾して、コントローラー クラスがカスタム コマンド コントローラー クラスであることを示すために使用されます

3.2 ElementRef

DOM オブジェクトへの参照として使用される依存性注入 は、コンストラクターを通じて実行されます。そのインスタンスは、カスタム命令でマークされた要素の DOM オブジェクトを表します。カスタム命令でマークされた各要素は、要素として ElementRef オブジェクトを自動的に持ちます。 . DOM オブジェクトへの参照 (前提条件: ElementRef はカスタム命令のコントローラーに依存的に挿入されます)

3.3 レンダー2

Angular では DOM ノードの直接操作を推奨していないため、Render2 のインスタンスが DOM ノードの操作に使用されます。Render2 は Angular4 からのみサポートされており、以前のバージョンでは Render が使用されていました。カスタム命令でマークされた各要素には、DOM 属性を操作するための Render2 インスタンスがあります。要素の(前提条件: Render2 はカスタム ディレクティブのコントローラーに依存関係が注入されています)

3.4 HostListener

イベントトリガーメソッドを装飾するために使用されるアノテーション

4 カスタム属性コマンド

カスタム属性ディレクティブには、@Directive デコレータで装飾されたコントローラー クラスが必要です

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 カスタム属性の手順を実装する

4.1.1 カスタム属性コマンド制御クラスを作成する

ヒント 01: カスタム命令専用のモジュールを作成する

ng g d directive/test/directive-test02 --spec=false --module=directive

4.1.2 コントローラークラスの依存性注入 ElementRef

constructor(
 private el: ElementRef
 ) {}

4.1.3 ElementRef インスタンスを通じてカスタム命令がマークされた要素に対応する DOM オブジェクトの背景色を変更する

 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

4.1.3 カスタムコマンドモジュールにexports

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectiveTest01Directive } from './test/directive-test01.directive';
import { SharedModule } from '../shared/shared.module';
import { DirectiveTest02Directive } from './test/directive-test02.directive';
@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [
  DirectiveTest01Directive,
  DirectiveTest02Directive],
 exports: [
  DirectiveTest01Directive,
  DirectiveTest02Directive
 ]
})
export class DirectiveModule { }

を指定する 4.1.4 指定した命令を使用する必要があるコンポーネントが配置されているモジュールにカスタム命令モジュールをインポートします

ヒント 01: カスタム命令は通常複数回使用されるため、カスタム命令モジュールは通常、共有モジュールにインポートされ、共有モジュールからエクスポートされます。そのため、他のモジュールは共有モジュールをインポートするだけで済みます

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { 
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 MdRadioModule,
 MdRadioButton
 } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DirectiveModule } from '../directive/directive.module'; 
@NgModule({
 imports: [
  CommonModule,
  RouterModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  MdToolbarModule,
  MdSidenavModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  DirectiveModule,
  MdRadioModule
 ],
 declarations: [],
 exports: [
  CommonModule,
  RouterModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  MdToolbarModule,
  MdSidenavModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  DirectiveModule,
  MdRadioButton
 ]
})
export class SharedModule { }

4.1.5 コンポーネント内でカスタムコンポーネントに対応するセレクターを使うだけ

カスタム ディレクティブのセレクターは、@Directive デコレーターのセレクター メタデータによって指定されます

要素内でカスタム命令のセレクターを直接マークするだけです

<p class="panel panel-primary">
  <p class="panel panel-heading">实现自定义属性指令</p>
  <p class="panel-body">
    <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
    <br /><br />
    <button md-raised-button>未实现自定以指令的按钮</button>
  </p>
  <p class="panel-footer">2018-1-20 22:47:06</p>
</p>

4.1.6 コード概要

import { Directive, ElementRef } from '@angular/core';
import { OnInit } from '../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }
}

4.2 入力属性をカスタム属性命令にバインドする

4.1 で実装されたカスタム属性命令では、背景色はハードコーディングされており、変更できません。動的変更の目的を達成するために、入力属性を命令にバインドしてデータ転送を実現できます。 4.2.1 カスタム属性ディレクティブのコントローラに入力属性 myColor

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 @Input()
 myColor: string;
 constructor(
  private el: ElementRef
 ) {}
 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = this.myColor;
 }
}

を追加する 4.2.2 コンポーネントの myColor プロパティに値を代入する

      技巧01：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来
View Code
    4.2.3 效果展示

    4.2.4 改进

      可以通过自定义属性指令的选择器来实现数据传输

      》利用自定义属性指令的选择器作为输入属性myColor输入属性的别名

      》在组件中直接利用自定义指令的选择器作为输入属性

View Code
      》 效果展示

  4.3 响应用户操作

    在自定义属性指令中通过监听DOM对象事件来进行一些操作

    4.2.1 引入 HostListener 注解并编写一个方法    

      技巧01：HostListener注解可以传入两个参数

        参数1 -> 需要监听的事件名称

        参数2 -> 事件触发时传递的方法

 @HostListener('click', ['$event'])
 onClick(ev: Event) {	
		  }	

    4.2.2 在方法中实现一些操作 

@HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
  if (this.el.nativeElement.style.backgroundColor === 'green') {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
  } else {
  this.el.nativeElement.style.backgroundColor = 'green';
  }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

实现react服务器渲染的步奏详解

JS里EventLoop的使用详解

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