问题描述： 我在使用Angular的mat-autocomplete组件时遇到了一个问题。我想要在自动完成选项中高亮显示用户输入的关键字。我尝试使用Angular的自定义管道来实现这个功能，但是无法正确地高亮显示匹配的关键字。

解决方法： 要解决这个问题，你可以使用Angular的内置的DomSanitizer服务来处理HTML字符串，并使用自定义管道来实现高亮显示。

首先，在你的组件中导入DomSanitizer服务：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

然后，在你的组件类中注入DomSanitizer服务：

constructor(private sanitizer: DomSanitizer) {}

接下来，创建一个自定义管道来实现高亮显示：

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

@Pipe({ name: 'highlight' }) export class HighlightPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {}

transform(text: string, search: string): SafeHtml { if (!search || !text) { return text; } const regex = new RegExp(search, 'gi'); const result = text.replace(regex, match => ${match}); return this.sanitizer.bypassSecurityTrustHtml(result); } }

在上面的代码中，我们使用了正则表达式来匹配搜索关键字，并将匹配到的关键字用标签包裹起来。然后，使用DomSanitizer服务的bypassSecurityTrustHtml方法来处理HTML字符串，以确保安全性。

最后，在模板中使用自定义管道来高亮显示自动完成选项：

{{ option.label | highlight: searchText }}

在上面的代码中，我们将用户输入的文本绑定到searchText变量上，并使用自定义管道来高亮显示自动完成选项的标签。在管道的transform方法中，我们将自动完成选项的标签作为文本参数，并将searchText作为搜索参数。

最后，通过在CSS中定义.highlight类来定义高亮样式：

.highlight { background-color: yellow; }

这样，当用户输入关键字时，匹配的关键字将以黄色背景高亮显示。

希望这个解决方法对你有帮助！