Angular 2 - 如何在 Angular matTooltip 上提供复制选项

Question

我正在使用 matTooltip 在 Angular 中显示工具提示。我面临两个问题 -

1) 我想在 matTooltip 上提供复制选项来复制工具提示文本。如何给它。

2) 我的第二个问题是，由于我的工具提示文本很大或很长，它没有完全显示在工具提示上，它在末尾用三个点包裹（例如“Thisistooltip ...”）。

如果有人遇到同样的问题，请指导。

Answer 1

1- 复制文字

您可以使用 ngxClipboard 进行复制...

<a 
   ngxClipboard
   (click)="copyToClipboard()"
   [cbContent]="textYouNeedToCopy" />
</a>

您还需要在 app.module.ts 中添加 FormsModule && ClipboardModule：

import { FormsModule } from '../../node_modules/@angular/forms';
import { ClipboardModule } from 'ngx-clipboard';

也将其添加到导入中...

2- 显示全文

我没有遇到过这个问题，但我发现一个 git 问题可能很有用： https://github.com/angular/material2/issues/3531

它明确地将 css 提供给工具提示，这是 css

.mat-tooltip {
    max-width: 50px;
    /* or */
    /* width: 50px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}