面试题：Angular自定义指令之基础应用

Question

在Angular中，如何创建一个简单的属性型自定义指令，用于为元素添加特定的CSS样式？请写出指令的基本结构和关键代码，并解释其工作原理。

Answer 1

1. 创建属性型自定义指令的基本步骤和关键代码

1. 创建指令：
   • 使用Angular CLI可以快速生成指令，在终端运行以下命令：

   ng generate directive highlight
   

   • 这会在src/app目录下生成一个highlight.directive.ts文件。
2. 编写指令代码：
   • 打开highlight.directive.ts文件，代码如下：

   import { Directive, ElementRef, HostListener, Input } from '@angular/core';
   
   @Directive({
     selector: '[appHighlight]'
   })
   export class HighlightDirective {
     constructor(private el: ElementRef) {}
   
     @Input() appHighlight: string;
   
     @HostListener('mouseenter') onMouseEnter() {
       this.highlight(this.appHighlight || 'yellow');
     }
   
     @HostListener('mouseleave') onMouseLeave() {
       this.highlight(null);
     }
   
     private highlight(color: string) {
       this.el.nativeElement.style.backgroundColor = color;
     }
   }
   

3. 在模板中使用指令：
   • 在组件的模板（例如app.component.html）中使用该指令：

   <p appHighlight="lightblue">This text will have a highlighted background on hover</p>
   

2. 工作原理解释

1. 装饰器和选择器：
   • @Directive装饰器用于将一个类标记为指令。selector属性指定了指令在模板中使用的方式，这里[appHighlight]表示这是一个属性型指令，当元素上出现appHighlight这个属性时，该指令会生效。
2. 依赖注入：
   • ElementRef通过构造函数注入到指令类中。ElementRef提供了对宿主DOM元素的引用，使得指令可以操作该元素。
3. 输入属性：
   • @Input() appHighlight: string;声明了一个输入属性appHighlight。这个属性可以从模板中传递值进来，用于指定需要应用的背景颜色。
4. 宿主监听器：
   • @HostListener('mouseenter')和@HostListener('mouseleave')装饰器用于监听宿主元素的mouseenter和mouseleave事件。当鼠标进入元素时，onMouseEnter方法被调用，调用highlight方法并传入指定的颜色（如果没有传入则使用默认的'yellow'）；当鼠标离开元素时，onMouseLeave方法被调用，调用highlight方法并传入null，即清除背景颜色。
5. 样式操作：
   • highlight方法通过ElementRef获取到宿主DOM元素，并直接操作其style.backgroundColor属性来应用或移除背景颜色，从而实现为元素添加特定CSS样式的功能。