无法选择Angular 9 pinchin pinchout文本中的HammerJS

问题描述

大家好，我注意到在组件中使用（pinchin）或（pinchout）事件时，其内部的文本不再是可选的。我看到很久以前，这个问题已在Hammerjs github页面 https://github.com/hammerjs/hammer.js/issues/81中得到纠正。因此，基本上他们说的是使用手势选项 https://github.com/hammerjs/hammer.js/wiki/Getting-Started#gesture-options，特别是使用名为 userselect 的选项，默认情况下该选项设置为 none 。

问题在于 hammerjs 文档全部用于较旧的angular版本，我不知道如何在较新的版本中（特别是 angular 9 ）定义此选项。

这是我的HTML，如您所见，我在其中显示一个pdf文件，其中包含一个可选的文本图层，这是我希望能够选择文本的图层。

<div class="col-xs-12 pdf-viewer-container" (pinchin)="zoomOut()" (pinchout)="zoomIn()">
      <div (swiperight)="prevIoUsPage()"></div>
      <pdf-viewer *ngIf="!!pdfData"
                  [src]="pdfData" (after-load-complete)="setNumberOfPages($event)"
                  [render-text]="true" [page]="currentPage" [show-all]="false"
                  [render-text-mode]="2" [zoom]="zoom" [original-size]="false"
                  [autoresize]="true" [stick-to-page]="false">
      </pdf-viewer>
      <div (swipeleft)="nextPage()"></div>
    </div>

当然，如果不使用pinchin和pinchout，则文本选择效果很好。我需要此功能才能在移动设备中使用手势。

我发现此答案应该这样做delete Hammer.defaults.cssprops.userSelect;，但是我仍然看不到我可以在角度9中做到这一点，因为我没有在组件中使用Hammer对象，而是在使用指令。

解决方法

唯一要做的就是修改名为 user-select 的元素css选择器，并将其设置为 value = all或text 根据您的需求。

这是我的查看器的CSS类：

 pdf-viewer {
            flex: 18 1 90%;
            margin: 30px auto;
            display: block;
            overflow: auto;
            max-width: 90%;
            user-select: text !important;
   }

angular angular9 gesture pinchzoom