是否可以在 Angular Material Tooltip 中有一个列表？

Question

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

我正在使用 Angular 5，以及适用于 Angular 5 的兼容材料。

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