Angular 9 pinchin pinchout 文本中的 HammerJS 不可选择答案

【问题标题】：HammerJS in Angular 9 pinchin pinchout text is not selectableAngular 9 pinchin pinchout 文本中的 HammerJS 不可选择
【发布时间】：2021-01-16 04:18:27
【问题描述】：

大家好，我注意到在组件中使用 (pinchin) 或 (pinchout) 事件时，其中的文本不再可选择。我看到这个问题很久以前已经在hammerjs github页面https://github.com/hammerjs/hammer.js/issues/81中得到纠正。所以基本上他们说的是使用 Gesture Options https://github.com/hammerjs/hammer.js/wiki/Getting-Started#gesture-options，特别是一个名为 userselect 的选项，默认设置为 none。 p>

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

这是我的 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>

当然，如果不使用捏合和捏合，文本选择也可以正常工作。我需要此功能才能在移动设备中使用手势。

我发现这个答案应该这样做 delete Hammer.defaults.cssProps.userSelect; 但是我看不到我可以在 angular 9 中这样做，因为我没有在我的组件中使用 Hammer 对象，我只是使用指令。

【问题讨论】：

标签： angular gesture angular9 hammer.js pinchzoom

【解决方案1】：

唯一需要做的就是修改名为 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;
   }

【讨论】：