Angular 7-在函数上调用指令

在Angular中，指令是一种用于改变DOM元素外观或行为的特殊类型的组件。指令可以通过属性、元素或类名来应用到DOM元素上。在Angular 7中，如果你想在函数上调用指令，通常意味着你想在组件的方法中使用指令的功能。

基础概念

指令（Directives）：

组件（Components）：带有模板的指令。
结构型指令（Structural Directives）：通过添加和移除DOM元素来改变DOM布局，例如*ngIf和*ngFor。
属性型指令（Attribute Directives）：改变元素、组件或其它指令的外观和行为，例如ngClass。

应用场景

结构型指令：用于条件渲染或重复渲染DOM元素。
属性型指令：用于动态地添加或移除CSS类，或者改变元素的属性。

在函数中调用指令

在Angular中，指令通常不是直接调用的，而是通过模板绑定到DOM元素上。如果你想在组件的方法中使用指令的功能，你需要理解指令是如何工作的，并且可能需要使用Angular的依赖注入系统来获取指令的实例。

示例代码

假设我们有一个自定义属性型指令highlight，它可以高亮显示文本：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

在组件中使用这个指令，并在方法中调用它的功能：

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-root',
  template: `<p appHighlight>Highlight me!</p>`
})
export class AppComponent {
  constructor(private highlightDirective: HighlightDirective) {}

  changeHighlightColor(color: string) {
    this.highlightDirective.highlight(color);
  }
}

在这个例子中，AppComponent依赖于HighlightDirective，并且在changeHighlightColor方法中调用了指令的highlight方法来改变文本的高亮颜色。