ホームページ ウェブフロントエンド jsチュートリアル Angular 学習でディレクティブ命令について語る

Angular 学習でディレクティブ命令について語る

Nov 04, 2022 pm 07:39 PM
フロントエンド angular.js

この記事では、Angular の学習を継続し、angular でのディレクティブ命令の使用方法を簡単に理解します。皆さんのお役に立てれば幸いです。

Angular 学習でディレクティブ命令について語る

ディレクティブは、DOM を変更して追加の動作を追加するために使用されます。 [関連チュートリアルの推奨事項: angularjs ビデオ チュートリアル プログラミング ビデオ ]

Angular 組み込み命令 angular.cn/guide/built…

たとえば、開発で一般的に使用される *ngFor は、DOM 要素を走査してレンダリングするために使用される命令です。

rick-chou.github.io/angular-tut…

ここでは主に説明します。独自の命令をカスタマイズする方法を紹介します

たとえば、マウスが出入りするときに DOM の背景色が切り替わるようにしたいです

<!-- 默认 鼠标移入时背景变成黄色 -->
<p highlight>Highlight me!</p>
<!-- 指定颜色 鼠标移入时背景变成红色 -->
<p highlight="red">Highlight me!</p>
ログイン後にコピー

この例を実装しましょう

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

// Directive装饰器 可以接收一个对象参数 但是现在我们还不需要
@Directive()
export class HighlightDirective {
  // 给这个指定定义一个 highlight 属性
  @Input() highlight = 'yellow';

  // 这里的 el 就是被我们的指令直接修饰的那个dom
  constructor(private el: ElementRef) {
    // 你可以在这里直接操作 dom
  }

  // 给这个dom定义一个mouseenter的监听器 后面的名字可以自定定义
  @HostListener('mouseenter') 
  onMouseEnter() {
    this.highlight(this.highlight);
  }

  // 添加鼠标移出的监听器 绑定对应的事件逻辑
  @HostListener('mouseleave') 
  onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
ログイン後にコピー

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

プログラミング教育

をご覧ください。 !

以上がAngular 学習でディレクティブ命令について語るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodeのメモリ制御に関する記事 Nodeのメモリ制御に関する記事 Apr 26, 2023 pm 05:37 PM

Nodeのメモリ制御に関する記事

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue3 で単体テストを作成する方法を調べる

Node の File モジュールについて詳しく説明しましょう Node の File モジュールについて詳しく説明しましょう Apr 24, 2023 pm 05:49 PM

Node の File モジュールについて詳しく説明しましょう

クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 Apr 25, 2023 pm 07:57 PM

クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンドの面接官からよく聞かれる質問

ノードのバッファーについて詳しく見る ノードのバッファーについて詳しく見る Apr 25, 2023 pm 07:49 PM

ノードのバッファーについて詳しく見る

フロントエンド開発に Go 言語を使用するにはどうすればよいですか? フロントエンド開発に Go 言語を使用するにはどうすればよいですか? Jun 10, 2023 pm 05:00 PM

フロントエンド開発に Go 言語を使用するにはどうすればよいですか?

See all articles