Question

我在Angular应用程序中使用了prime-ng组件库。我使用p-slider组件：

<p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue"></p-slider>

我想将工具提示添加到p滑块手柄（要粘贴并显示在手柄上方）。当我将[pTootip]指令添加到p-slider组件时，工具提示会显示在滑块上，而不是句柄上。

<p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" [pTooltip]="rankItem.itemSliderNumber"></p-slider>

如何将工具提示粘贴到滑块的手柄上？

Answer 1

经过一番调查，我可以确认没有简单的解决方案。最后，我扩展了ng-prime工具提示指令：

import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core';
import {DomHandler, Tooltip} from "primeng/primeng";

@Directive({
    selector: '[ext-tooltip]'
})

export class ExtendedTooltipDirective extends Tooltip implements AfterViewInit {

    @Input('ext-tooltip')
    _text: any;

    @Input('stickTo')
    stickTo: string;


    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2) {
        super(el, domHandler, renderer);
    }

    ngAfterViewInit(): void {
        this.el = new ElementRef(this.el.nativeElement.querySelector(this.stickTo));
    }
}

该指令可以用作工具提示指令，但它有额外的属性stickTo，在可能的情况下使用query来获取组件内部的元素，工具提示应该附加到该组件。对于p-slider，我们可以使用hanler的类＆＃34; .ui-slider-handle＆＃34;。

<p-slider [ext-tooltip]="rankItem.itemSliderNumber" stickTo=".ui-slider-handle" tooltipPosition="top" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" ></p-slider>

也可以使用prime-ng工具提示的所有原始属性。

如何将pTooltip附加到p-slider的手柄（prime-ng angular components）

1 个答案: