如何从绑定的Angular指令调用其所在组件的函数？

在Angular项目中，我给<app-movie-display>组件绑定了appIsTouching指令，模板代码如下：

<app-movie-display (appIsTouching)="doSomething()"></app-movie-display>

appIsTouching指令的核心逻辑代码：

@HostListener('touchstart', ['$event']) public handleTouchStart(): void {
  this.touching = true;
  const startTouch = new Date;

  const touchInterval = setInterval(() => {
    const currentTime = new Date
    const timeDifference = currentTime.getTime() - startTouch.getTime()

    if (!this.touching) {
      clearInterval(touchInterval)
    }

    if (timeDifference > 600) {
      clearInterval(touchInterval)
      this.newItemEvent.emit();
    }
  }, 25);
}

我的需求是让指令调用它所绑定的<app-movie-display>组件中的doSomething()方法，但目前出现报错：

Property 'doSomething' does not exist on type 'MovieDashboardComponent'.

MovieDashboardComponent是包含<app-movie-display>的父组件，我清楚报错原因是EventEmitter默认向父组件发送事件，现在想实现指令直接调用绑定组件的函数，该如何操作？

有两种实用的方式可以实现指令调用绑定组件的方法：

方法一：注入宿主组件直接调用 #

通过@Host()装饰器在指令中注入绑定的宿主组件（即<app-movie-display>对应的组件类），直接调用其方法：

1. 在指令中导入宿主组件类并注入：

import { Directive, Host, HostListener } from '@angular/core';
import { MovieDisplayComponent } from './path/to/movie-display.component';

@Directive({
  selector: '[appIsTouching]'
})
export class IsTouchingDirective {
  // 用@Host()注入宿主组件实例
  constructor(@Host() private hostComp: MovieDisplayComponent) {}

  @HostListener('touchstart', ['$event']) public handleTouchStart(): void {
    this.touching = true;
    const startTouch = new Date;

    const touchInterval = setInterval(() => {
      const currentTime = new Date
      const timeDifference = currentTime.getTime() - startTouch.getTime()

      if (!this.touching) {
        clearInterval(touchInterval)
      }

      if (timeDifference > 600) {
        clearInterval(touchInterval);
        // 直接调用宿主组件的doSomething方法
        this.hostComp.doSomething();
      }
    }, 25);
  }
}

2. 确保宿主组件的doSomething()方法为公共（public）：

export class MovieDisplayComponent {
  public doSomething(): void {
    // 方法逻辑实现
  }
}

这种方式直接高效，适合指令与宿主组件耦合度较高的场景。

方法二：通过输入属性传递方法 #

如果希望指令更通用，不直接依赖宿主组件类，可以通过输入属性接收宿主组件的方法：

1. 在指令中定义输入属性接收方法：

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

@Directive({
  selector: '[appIsTouching]'
})
export class IsTouchingDirective {
  // 定义输入属性，接收宿主组件的方法
  @Input('appIsTouching') triggerAction?: () => void;

  @HostListener('touchstart', ['$event']) public handleTouchStart(): void {
    this.touching = true;
    const startTouch = new Date;

    const touchInterval = setInterval(() => {
      const currentTime = new Date
      const timeDifference = currentTime.getTime() - startTouch.getTime()

      if (!this.touching) {
        clearInterval(touchInterval)
      }

      if (timeDifference > 600) {
        clearInterval(touchInterval);
        // 调用传入的方法，先判断是否存在避免报错
        this.triggerAction?.();
      }
    }, 25);
  }
}

2. 在模板中通过输入绑定传递方法：

<app-movie-display [appIsTouching]="doSomething"></app-movie-display>

注意这里使用方括号[]进行输入绑定，而非之前的事件绑定语法()。

这种方式灵活性更高，指令无需知晓宿主组件的具体类型，只要方法签名匹配即可复用。

内容的提问来源于stack exchange，提问作者Peter Boomsma