在angular指令上应用作用域并调用对象函数

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

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() myObject: any;

  constructor() { }

  callFunction() {
    if (this.myObject && typeof this.myObject.myFunction === 'function') {
      this.myObject.myFunction();
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div [myDirective]="myObject" (click)="callDirectiveFunction()"></div>
  `
})
export class MyComponent {
  myObject = {
    myFunction: () => {
      console.log('Function called!');
    }
  };

  callDirectiveFunction() {
    // 调用指令中的函数
  }
}

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

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() myObject: any;

  constructor() { }

  @HostListener('click')
  onClick() {
    this.callFunction();
  }

  callFunction() {
    if (this.myObject && typeof this.myObject.myFunction === 'function') {
      this.myObject.myFunction();
    }
  }
}

// 确保myObject正确传递到指令中
<div [myDirective]="myObject"></div>