С помощью всплывающей подсказки Angular Material, но не могу выделить текст на элементе под ним - PullRequest
Новая
       16

С помощью всплывающей подсказки Angular Material, но не могу выделить текст на элементе под ним

1 голос
/ 23 марта 2019

У меня есть всплывающая подсказка Angular Material, используемая для отображения информации при наведении курсора на ячейки столбцов в элементе таблицы. Помимо этой функциональности я также требую, чтобы пользователи могли выделять текст и выделять его из элемента таблицы, чтобы они могли копировать и вставлять его.

Поскольку я использую всплывающую подсказку 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;
}

Пользователи должны иметь возможность наводить курсор на столбец и видеть подсказку, а также выделять текст в таблице для этого столбца.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Чтобы это работало, я добавил следующего провайдера в мой пользовательский NgModule , который импортирует все компоненты угловых материалов, которые я использую в своем приложении, и затем импортирую по мере необходимости 

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

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

  providers: [
    {
      provide: MAT_HAMMER_OPTIONS,
      useValue: {
        cssProps: {
          userSelect: true
        }
      },
    },
  ],
})
0 голосов
/ 23 марта 2019

Похоже, существует открытая проблема по этому поводу: https://github.com/angular/material2/issues/8817

Вместо того, чтобы давать пользователю возможность копировать, вы можете принудительно скопировать текст в буфер обмена при автоматическом наведении на всплывающую подсказку, используя: NGX-буфер

...