今回は、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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
