Event 类型的参数不可分配给 PanGestureEventData 类型的参数答案

【问题标题】：Argument of type Event is not assignable to parameter of type PanGestureEventDataEvent 类型的参数不可分配给 PanGestureEventData 类型的参数
【发布时间】：2022-06-13 17:25:45
【问题描述】：

我正在使用 Angular 构建一个 NativeScript 应用程序。在 HTML 方面，我尝试绑定到 TouchEvent，但这是我遇到的错误。错误信息：

Argument of type 'Event' is not assignable to parameter of type 'PanGestureEventData'.
  Type 'Event' is missing the following properties from type 'PanGestureEventData': deltaX, deltaY, state, view, and 4 more.ngtsc(2345)

component.html

<Label
  class="content-drawer"
  (pan)="onPanMoveContainer($event)"
  alignSelf="center"
  textAlignment="center"
  [text]="'fa-window-minimize' | fonticon"
  class="fa"
  fontSize="20"
></Label>

组件.ts

import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '@angular/core';

import { BottomSheetLayoutBaseComponent } from '@loyaltyversion2/xplat/features';
import { PanState } from '@loyaltyversion2/xplat/nativescript/utils';
import { PanGestureEventData, View } from '@nativescript/core';

@Component({
  moduleId: module.id,
  selector: 'app-bottom-sheet-layout',
  templateUrl: './bottom-sheet-layout.component.html',
  styleUrls: ['./bottom-sheet-layout.scss'],
})
export class BottomSheetLayoutComponent
  extends BottomSheetLayoutBaseComponent
{
  private currentContentTransitionY = 200;

  constructor() {
    super();
  }

  onPanMoveContainer(event: PanGestureEventData) {
    // TODO: why can't we use TouchGestureEventData

    this.moveContentToLocation(this.currentContentTransitionY + event.deltaY);

    if (event.state === PanState.UP) {
      this.currentContentTransitionY =
        this.currentContentTransitionY + event.deltaY;
    }
  }
}

我的工作区是使用 nx/xplat@^12.0.0 生成的，我的猜测是我的 tsconfig 或 xplat 应用程序生成器设置的一些 linter 应该存在一些错误配置，但我没有更改这些文件中的任何内容。有什么猜测吗？

【问题讨论】：

TouchGestureEventData 用于touch 事件，而不是pan。如果您使用(touch)="onTouchMoveContainer($event)" 更新您的HTML，它应该允许您使用TouchGestureEventData。
@William Juan 在 html 中使用 pan 方法的名称是 touch

标签： nativescript nativescript-angular

【解决方案1】：

该错误表明事件名称和函数的预期参数类型之间存在混淆。

如果您想将pan 事件与PanGestureEventData 一起使用：

<Label
  (pan)="onPanMoveContainer($event)"
></Label>

onPanMoveContainer(event: PanGestureEventData) {
}

如果您想将touch 事件与TouchGestureEventData 一起使用：

<Label
  (touch)="onTouchMoveContainer($event)"
></Label>

onTouchMoveContainer(event: TouchGestureEventData) {
}

【讨论】：

感谢您的回复。是的，html 和我的 backcode (component.ts) 文件中事件的数据类型是相同的，并且都对应于 PanGestureEventData，它是函数名称，它是 onTouch，这无关紧要（正如我在我发布的代码中显示的那样问题）。

【解决方案2】：

我不得不禁用位于“tsconfig.js”中的“compilerOptions”中的“strictTemplates”选项

【讨论】：