Question

当悬停在表格元素中的列单元格上时，我有一个“角度材质”工具提示用于显示信息。除了此功能之外，我还要求用户能够选择文本并从表元素中突出显示文本，以便他们可以复制和粘贴文本。

因为我使用的是Angular Material工具提示和:: ng-deep在列顶部显示它，所以它在现有DOM元素上创建了一个叠加层，因此我无法在该列中选择文本。有没有办法解决？我必须编辑matToolTip类吗？

谢谢！

我的最终解决方案将是使用更本地化的工具提示元素，这些元素将成为DOM的一部分，并且不会阻止用户选择文本，但这并不是那么漂亮，所以这是我的最后选择。

edit.component.html

import { MatTooltipModule } from '@angular/material/tooltip';

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

edit.component.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

用户应该能够将鼠标悬停在该列上并查看工具提示，并突出显示该列的表格中的文本。

Answer 1

好像有一个未解决的问题： https://github.com/angular/material2/issues/8817

您可以使用ngx-clipboard

来自动将鼠标悬停在工具提示上，而不是向用户提供复制选项，而是强制将文本复制到剪贴板。

Answer 2

为使此工作正常进行，我在custom NgModule中添加了以下提供程序，该提供程序导入了我在应用程序中使用的所有Angular Material组件，然后根据需要将其导入

import { MAT_HAMMER_OPTIONS } from '@angular/material';

@NgModule({
  // imports, exports, etc. go here

  providers: [
    {
      provide: MAT_HAMMER_OPTIONS,
      useValue: {
        cssProps: {
          userSelect: true
        }
      },
    },
  ],
})

使用角度材质工具提示，但无法在其下方的元素上选择文本

2 个答案: