如何通过 Angular 自定义组件传递 class

Question

所以我有一个工具提示自定义组件，我需要能够将 class 传递到底层 html，但不知道该怎么做。 目前工具提示（自定义 angular 组件）html 如下所示：

<div role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right">
    <clr-icon class="icon-shape is-solid" shape="info-circle" size="20"></clr-icon>
    <div class="tooltip-content">
        <ng-content></ng-content>
    </div>
</div>

使用这个自定义组件就像：

<tooltip>This is the text displayed.</tooltip>

我需要做的是传入 position 以便工具提示不总是在右下角。 所以我需要传递一个属性或 class 或其他东西，以便在自定义组件中我可以将我的 div 的 class 更改为“tooltip-top-right”、“tooltip-bottom-left”等......就像这样：

<tooltip class="tooltip-bottom-left">Tooltip text</tooltip>

或者

<tooltip position="bottom-left">Tooltip text</tooltip>

然后在组件的.ts 或.html 中，将适当的class 分配给我的div。
提前致谢！

Answer 1

在这种情况下，您可以使用 mat-tooltip。 https://material.angular.io/components/tooltip/overview

它内置了 matTooltipPosition 指令，因此您无需向其添加任何 class。

1) 在 app.module.ts 中导入相应的模块

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

2) 使用 mat-tooltip 选择器和 matTooltipPosition 输入属性

<button mat-raised-button
    matTooltip="Info about the action"
   [matTooltipPosition]='where you want it to be'
    aria-label="Button that displays a tooltip when focused or hovered over">
  Action
 </button>

更多示例： https://material.angular.io/components/tooltip/examples