angular - 是否可以在 Angular Material Tooltip 中包含一个列表？

Question

基本上我想在我的工具提示中包含一个 ul 元素。

我正在使用 Angular 5 以及 Angular 5 的兼容 Material 。

Answer 1

帕维尔·阿加科夫(Pavel Agarkov)的评论方向是正确的。为了让事情变得简单，创建一个自定义管道来自动将文本转换为项目符号列表项。管道负责添加将由 CSS 类格式化的项目符号和换行符:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'tooltipList' })

export class TooltipListPipe implements PipeTransform {

  transform(lines: string[]): string {

    let list: string = '';

    lines.forEach(line => {
      list += '• ' + line + '\n'; 
    });

    return list;
  }
}

按照 Pavel 建议定义 CSS - 并记住将其添加到全局样式表中:

.tooltip-list {
  white-space: pre;
}

并使用自定义管道将表示列表项的字符串数组传递给 MatToolip，并将该类应用于工具提示:

<span
    [matTooltip]="['Wash car','Get a haircut','Buy milk'] | tooltipList" 
    matTooltipClass="tooltip-list">
  TODO List (hover)
</span>

这是 StackBlitz 上的:https://stackblitz.com/edit/angular-o9sfai?file=styles.css