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

Angular Material工具提示中是否可能有一个列表？

1 个答案: