使用命令行ng g d color:

實現源代碼：

import { Directive, HostBinding, HostListener } from '@angular/core';@Directive({selector: '[appRainbow]' }) export class RainbowDirective{possibleColors = ['darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff','mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'];@HostBinding('style.color') color: string;@HostBinding('style.borderColor') borderColor: string;@HostListener('keydown') onKeydown(){const colorPick = Math.floor(Math.random() * this.possibleColors.length);console.log('Jerry colorPick: ' + colorPick);this.color = this.borderColor = this.possibleColors[colorPick];} }

定義一個input field：

<input appRainbow/>

在directive實現內部，通過@HostBinding達到directive施加的host元素的css樣式和directive屬性綁定的目的。

directive施加的host元素一旦發生keydown事件，會自動觸發directive實現的onKeydown函數，每觸發一次，修改color和borderColor屬性的值，達到host元素變色的效果：

2021-1-12 星期二

經過測試，使用Directive不需要中括號：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的SAP Spartacus 自定义指令的实现以及通过@HostBinding实现属性绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。