Angular 指令：在回调函数中使用父 class 变量

Question

我创建了一个将回调函数作为输入的指令。当父级上的事件 touchstart 被触发时调用此回调：

@Directive({
  selector: '[appSwipeRight]',
})
export class SwipeRightDirective implements AfterViewInit{
  @Input() appSwipeRight!: () => void;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    fromEvent(this.elementRef.nativeElement, 'touchstart').subscribe(() => {
      // ...
      this.appSwipeRight();
    });
  }
}

@Component({
  selector: 'app-general',
  template: '<main class="main" [appSwipeRight]="onSwipeRight"></main>',
})
export class GeneralComponent {
  // ...
  onSwipeRight() {
    this.router.navigate(['/myurl']);
  }
}

我的问题：回调 appSwipeRight 包含来自父级的 class 变量 router。这编译得很好，但是当运行时，我收到错误“无法读取未定义的属性”，因为变量不存在于指令中。

我通过在指令中注入 router: Router 找到了解决方法。但这很脏，因为它被标记为未使用（而且我不希望我的指令是特定的）。

我可以将 router 作为回调的参数传递吗？或者有其他方法可以解决这个问题吗？

Answer 1

如果将函数设为箭头函数，它将保留其原始词法上下文（即 this 关键字将引用原始上下文）。

  onSwipeRight = () => this.router.navigate(['/myurl']);

像您一样传递普通函数，this 将引用包含该函数的新对象。

Angular 指令：在回调函数中使用父 class 变量

Angular Directive: Use parent class variable in callback function

typescript

angular-directive

angular