Angular Material 7 – 工具提示

在我们的应用程序中，展示用户数据的各种交互式视图中，为了使用户更好地理解我们的设计，我们需要使用一些类似于提醒或解释的小部件。Angular Material 7为我们提供了一种名为工具提示的小部件，可以通过简单的鼠标悬停或单击事件来显示一些提示信息。在这篇文章里，我们将详细介绍如何使用Angular Material 7的工具提示。

界面展示

工具提示主要用于在用户与使用的Angular Material应用程序交互的过程中，展示一些提示信息，以便更好地理解整个应用程序的设计。

Angular Material应用程序中工具提示的原始外观。当用户悬停在一个元素上（例如按钮，图标等）时，会自动出现一个小的提示框，显示与元素相关的提示信息。

安装

要使用Angular Material 7的工具提示，我们需要首先安装Angular Material。

使用CLI安装Angular Material

ng add @angular/material

npm 安装

npm install @angular/material

安装完成Angular Material之后，我们现在需要在应用程序中引入MatTooltipModule。MatTooltipModule包括MatTooltip组件，所以我们需要将它添加到我们的应用程序中。

import {MatTooltipModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTooltipModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

在使用工具提示之前，我们需要知道以下几个属性：

matTooltip：指定绑定到元素的文本内容。
matTooltipPosition：指定tooltip的位置。可选项：above，before，after，below。
matTooltipClass：指定附加到mat-tooltip-panel容器的CSS class。

<!-- basic usage -->
<button mat-icon-button matTooltip="Follow this channel!">
  Follow
</button>

<!-- specify position -->
<button mat-icon-button matTooltip="Follow this channel!" matTooltipPosition="before">
  Follow
</button>

<!-- add class -->
<button mat-icon-button matTooltip="Follow this channel!" matTooltipClass="my-tootip-class">
  Follow
</button>

上面的代码块是Angular应用程序中使用工具提示的三个基本用例。

第一个使用了带有文本说明的按钮，并在用户将鼠标悬停在按钮上时显示了工具提示。
第二个用例将工具提示从按钮的上方更改为按钮的左侧。
第三个将我们自己的样式类添加到工具提示面板中。

配置提示到服务

我们还可以在Angular应用程序中使用MatTooltipService定义自己的定制工具提示。

我们先创建一个公共服务，其中有一个方法showToolTip，用于提示信息。

import {Injectable} from '@angular/core';
import {MatTooltip} from '@angular/material';

@Injectable()
export class CustomTooltipService {
    showToolTip(tooltip: MatTooltip, content: string) {
        tooltip.message = content;
        tooltip.show();
        setTimeout(() => tooltip.hide(), 2000);
    }
}

上面的代码块中，我们首先以Injectable方式引入了MatTooltip，并定义了一个名为“showToolTip”的函数，并接收两个参数：tooltip和content。在函数内部，我们设置了提示框的消息，并在2000毫秒后隐藏它。

使用服务时，我们需要注入CustomTooltipService，并在需要呈现提示信息的元素上绑定ng-template和MatTooltip指令。

<button mat-raised-button
        #tip="matTooltip"
        [matTooltip]="template"
        (click)="tooltip.showToolTip(tip, 'Follow to learnmore!')">
  Follow
</button>

<ng-template #template>
  <span>Follow: to learn more about us</span>
</ng-template>

在这个HTML中，我们首先使用MatTooltip直接绑定了一个所有提示信息的内联文本消息，但也添加了一个按钮（第一个参数$tip）和一个指向名称为“template”的ng-template的指令。在这个ng-template中，我们可以将整个自定义提示信息包装在一个容器中。

我们这里在click事件监听器中调用了 showToolTip 方法，它接收两个参数：$tip和自定义消息文本。当我们点击了按钮时，Angular自动将$tip作为第一个参数传递，我们可以在自定义服务中获取到它，并显示出相应的提示信息。

自定义工具提示的样式

如果您需要更改工具提示的默认样式，可以在应用程序级别上进行全局更改。为了完成这个任务，我们可以使用:ng-deep伪类选择器。

// app.component.scss

::ng-deep .mat-tooltip {
  color: #FFFFFF;
  background-color: #333333;
}

在以上代码中，我们已经改变了工具提示面板的文本颜色和背景颜色，这意味着当您在拥有 .mat-tooltip 类的元素上悬停时，会自动应用这些样式。

结论

这篇文章的目的是为了讲解如何使用Angular Material 7的工具提示，并听你的掌声响起，我们在应用程序中展示工具提示的基本用例，定义了自己的MatTooltipService，并更改了默认样式。Angular Material 7的工具提示让开发工作更方便快捷，它为我们的用户提供了重要的交互信息。怎么样，现在你学会使用它了吗？尝试编写一些自己的样例来加深你的印象吧！