面试题：Angular中如何实现指令与服务的基本交互

指令依赖注入服务

在Angular项目中，指令依赖注入服务非常简单。首先，在指令的构造函数中声明需要注入的服务类型。Angular的依赖注入系统会自动创建或复用服务实例并注入到指令中。

假设我们有一个名为MyService的服务，在指令中注入它的方式如下：

import { Directive, Injectable } from '@angular/core';

@Injectable()
export class MyService {
  someMethod() {
    return 'This is from MyService';
  }
}

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private myService: MyService) {}
}

这里，MyDirective通过构造函数注入了MyService，myService 就可以在指令的任何方法中使用。

在指令生命周期钩子函数中调用服务方法

场景：比如在指令初始化后，需要从服务获取一些初始数据来配置指令的行为。例如，在一个自定义的HighlightDirective指令中，当指令初始化时，根据服务中的配置决定是否对元素进行高亮显示。
代码实现：

import { Directive, ElementRef, OnInit, Injectable } from '@angular/core';

@Injectable()
export class HighlightConfigService {
  shouldHighlight(): boolean {
    // 这里可以是从后端获取配置等复杂逻辑，简单示例返回true
    return true;
  }
}

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  constructor(private el: ElementRef, private highlightConfigService: HighlightConfigService) {}

  ngOnInit() {
    if (this.highlightConfigService.shouldHighlight()) {
      this.el.nativeElement.style.backgroundColor = 'yellow';
    }
  }
}

在上述代码中，HighlightDirective在ngOnInit生命周期钩子函数中，调用了HighlightConfigService的shouldHighlight方法，根据返回结果决定是否对指令所在的元素进行高亮显示。

星途面试题库

面试题：Angular中如何实现指令与服务的基本交互

知识考点

面试题答案

指令依赖注入服务

在指令生命周期钩子函数中调用服务方法