在角度2+中构建指令与构建组件没有太大区别。毕竟，组件只是附加了视图的指令。事实上，角度中有三种指示语：成分指示语、定语指示语和结构指示语。
结构指令在DOM中添加或删除元素。NgIf，ngFor和ngSwitch[ngSwitch]是内置结构指令的示例。属性指令用于更改元素的样式或行为。
让我们通过一个带有appShadow指令的示例学习如何创建自定义属性指令。
定义指令类
从 @angular/core 导入Directive，ElementRef和Renderer 2，然后使用渲染器将元素的样式设置为我们想要的** box-shadow** 值：
1[label Directive: shadow.directive.ts]
2import { Directive, ElementRef, Renderer2 } from '@angular/core';
请注意我们的选择器是如何括在方括号中的：[appShadow]，以正确地使其成为属性指令。
在我们的app模块中声明
下面是如何在app根模块中声明我们的新指令：
1[label App Module: app.module.ts]
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4import { AppComponent } from './app.component';
5
6import { ShadowDirective } from './shadow.directive';
使用我们模板中的指令
现在，只需在我们的模板中使用ATTRIBUTE指令就可以了：
1[label App Module: app.component.html]
2<span appShadow>Alligator</span>
改进我们的指令
我们的appShadow指令有点愚蠢，我们本可以简单地使用样式binding来应用阴影。因此，让我们通过允许将值传递给我们的指令来使其更好：
1[label Directive: shadow.directive.ts]
2import { Directive, ElementRef, Input, Renderer2, OnInit } from '@angular/core';
3
4@Directive({ selector: '[appShadow]' })
5export class ShadowDirective implements OnInit {
6@Input() appShadow: string;
7@Input() appShadowX: string;
8@Input() appShadowY: string;
9@Input() appShadowBlur: string;
10
11constructor(private elem: ElementRef, private renderer: Renderer2) { }
12
13ngOnInit() {
14 let shadowStr = `${ this.appShadowX } ${ this.appShadowY } ${ this.appShadowBlur } ${ this.appShadow }`;
15 this.renderer.setStyle(this.elem.nativeElement, 'box-shadow', shadowStr);
16}
我们使用inputs将数据从组件模板传递到指令。还要注意我们现在是如何使用OnInit生命周期钩子而不是在构造函数中完成工作的。这是因为我们的投入在施工时没有任何价值。
您现在可以完全控制阴影：
1[label App Module: app.component.html]
2<span [appShadow]="'hotpink'"
3 [appShadowX]="'12px'"
4 [appShadowY]="'6px'"
5 [appShadowBlur]="'30px'">Alligator</span>
👉我们将指令命名为appShadow，而不是Shadow，因为这是将自定义指令的作用域保持在应用程序范围内的最佳实践。