Разработка глобальной подсказки - PullRequest
Новая
       15

Разработка глобальной подсказки

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

У меня сейчас что-то вроде этого: (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, что я могу сделать здесь?

На данный момент один вариант Iсм. в некотором корневом файле, добавьте шаблон и поместите его в Службу как поле), так что я могу сделать это.ngbTooltip = SomeService.tempalteRef - но это выглядит очень сложно.

NgbTooltip открывает TooltipWindowComponent, в который он внедряет шаблон, я решил изменить это и вместо этого открыть свой собственный компонент окна. Это решает проблему - но требует некоторой причины дублирования кода закрытых методов в NgbTooltip.

Ответы [ 4 ]

3 голосов
/ 15 октября 2019

Привет Попробуйте, я создаю одну директиву всплывающей подсказки: 

@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>
2 голосов
/ 15 октября 2019

Вы можете изменить вход 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">
0 голосов
/ 15 октября 2019

Попробуйте это: 

export class MyTooltipDirective extends NgbTooltip {
    constructor(tmpl: TemplateRef,
                tooltip: NgbToolTip) {
       this.tooltip= this.tmpl;
    }
}
0 голосов
/ 10 октября 2019

Этого можно добиться без директивы, внедрив установщик наведения текста: 

<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;
}

Таким образом, вы можете установить всплывающую подсказку с одинаковым видом для всех компонентов, и сообщение будет настроено динамически.

...