Angular 学習でディレクティブ命令について語る
Nov 04, 2022 pm 07:39 PM
フロントエンド
angular.js
この記事では、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 までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7141
9


Java チュートリアル
1534
14


Laravel チュートリアル
1257
25


PHP チュートリアル
1205
29


CakePHP チュートリアル
1155
46



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