面试题：Angular自定义指令中如何获取宿主元素的属性值

Question

在Angular中打造个性化自定义指令时，假设宿主元素有一个自定义属性 `data - custom`，请阐述如何在自定义指令中获取该属性的值，并给出关键代码示例。

Answer 1

1. 获取自定义属性值的方法：
   • 在Angular自定义指令中，可以通过ElementRef来获取宿主元素，进而获取其属性值。也可以使用@HostBinding和@HostListener相关的装饰器来处理宿主元素的属性和事件等，这里我们用ElementRef来获取data - custom属性值。
2. 关键代码示例：

   import { Directive, ElementRef, OnInit } from '@angular/core';
   
   @Directive({
     selector: '[appCustomDirective]'
   })
   export class CustomDirective implements OnInit {
     constructor(private elementRef: ElementRef) {}
   
     ngOnInit() {
       const customValue = this.elementRef.nativeElement.getAttribute('data - custom');
       console.log('自定义属性data - custom的值为:', customValue);
     }
   }
   

   在上述代码中：
   • 首先通过依赖注入将ElementRef注入到指令的构造函数中。
   • 在ngOnInit生命周期钩子函数中，使用elementRef.nativeElement.getAttribute('data - custom')来获取data - custom属性的值，并通过console.log打印出来。实际应用中，可以根据需求对获取到的值进行进一步处理。