开发全局工具提示

Question

我目前有这样的东西：（myTooltip 是 ngbTooltip 的一些扩展，允许提供上下文）

..component1:
    <div [myTooltip]="tip" [myTooltipContext]="{...}">
    <ng-template #tip let-param="param">
        <tip-component param="param"></tip-component>
    </ng-template>

..component2:
    <div [myTooltip]="tip" [myTooltipContext]="{...}">
    <ng-template #tip let-param="param">
        <tip-component param="param"></tip-component>
    </ng-template>

..component3:
    <div [myTooltip]="tip" [myTooltipContext]="{...}">
    <ng-template #tip let-param="param">
        <tip-component param="param"></tip-component>
    </ng-template>

你看这是代码重复，我希望有这样的东西：

<div [myTooltip]="{...}"> // no template reference here and no template in file at all

正在尝试编写此指令：

export class MyTooltipDirective extends NgbTooltip {
    ngOnInit() {
        this.ngbTooltip = ???? /*need to provide here TemplateRef */
    }
}

例如在 angularjs 我会把模板放到 $templateCache 中，我能在这里做什么？

现在我看到的一个选项是在一些根文件中添加模板并将其作为字段放入服务），所以我可以做到 this.ngbTooltip = SomeService.tempalteRef——但这看起来很棘手.

更新，我的解决方案

NgbTooltip 打开它注入模板的 TooltipWindowComponent，我决定改变它并打开我自己的 window 组件。这解决了问题——但需要一些代码重复导致 NgbTooltip 中的私有方法。

Answer 1

您可以在没有指令的情况下通过实现悬停文本来实现此目的 setter:

<div *ngFor="let o of someObjects">
    <div [ngbTooltip]="tooltip" (hover)="setTooltipText('I\'m a tooltip!')"></div>
</div>

<ng-template #tooltip>
    <div>{{tooltipText}}</div>
</ng-template>

tooltipText = '';


setTooltipText(text: string){
  this.tooltipText = text;
}

通过这种方式，您可以为所有组件设置相同外观的工具提示，并且消息是动态设置的。

Answer 2

你好试试这个我正在创建一个工具提示指令：

@Directive({
  selector: '[appStickytooltip]',
  exportAs: 'appStickytooltip'
})
export class StickytooltipDirective extends NgbTooltip {
  @Input() stickyPopover: TemplateRef<any>;

 ngOnInit() {
    this.ngbTooltip = this.stickyPopover;
}

}

在模板中，您有十个组件，每个组件都有这样的调用指令：

<h5 class="tile-sub-heading" appStickytooltip popoverClass="customClass" placement="top-left" [appStickytooltip]="'Hello i am tooltip'">Hove Over Me</h5>

Answer 3

您可以将 myTooltip 输入更改为任何您想要的参数。

https://stackblitz.com/edit/angular-awg48u-pa4o1t?file=app%2Fmy-tooltip.component.ts

import {Component, Host, ViewChild, TemplateRef, AfterViewInit, Input } from '@angular/core';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'myTooltip, [myTooltip]',
  template: `
  <ng-content>
  </ng-content>
  <ng-template>Hello {{myTooltip}}</ng-template>
  `
})
export class MyTooltipComponent implements AfterViewInit {

  @Input() myTooltip: string = '';

  @ViewChild(TemplateRef, { static: false}) template: TemplateRef<void>;

  ngAfterViewInit () {
   this.bindTemplete()
  }

  bindTemplete() {
    if (this.ngbTooltop) {
        this.ngbTooltop.ngbTooltip = this.template;
    }
  }
  constructor(@Host() private ngbTooltop: NgbTooltip) {

  }
}

..component1:
    <div ngbTooltip myTooltip="A">

..component2:
    <div ngbTooltip myTooltip="B">

..component3:
    <div ngbTooltip myTooltip="C">

Answer 4

试试这个：

export class MyTooltipDirective extends NgbTooltip {
    constructor(tmpl: TemplateRef,
                tooltip: NgbToolTip) {
       this.tooltip= this.tmpl;
    }
}

开发全局工具提示

Developing global tooltip

ng-bootstrap

angular