如何通過 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