Как передать класс через пользовательский компонент Angular - PullRequest
Новая
       7

Как передать класс через пользовательский компонент Angular

1 голос
/ 02 октября 2019

Итак, у меня есть пользовательский компонент всплывающей подсказки, который мне нужен, чтобы иметь возможность передавать класс в базовый html, но я не уверен, как это сделать. В настоящее время 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>

Что мне нужно сделать, это передать врасположите так, чтобы подсказка не всегда была в правом нижнем углу. Поэтому мне нужно передать либо свойство, либо класс, либо что-то еще, чтобы в пользовательском компоненте я мог изменить класс моего div на «tooltip-top-right», «tooltip-bottom-left» и т. Д., Например так:

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

или 

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

А затем внутри .ts или .html компонента назначьте соответствующий класс моему div.
Заранее спасибо!

1 Ответ

0 голосов
/ 02 октября 2019

Вы можете использовать mat-tooltip для этого случая. https://material.angular.io/components/tooltip/overview

Он имеет встроенную директиву matTooltipPosition, поэтому вам не нужно добавлять в нее какой-либо класс.

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

...