создать подсказку углового компонента программно - PullRequest
0 голосов
/ 27 сентября 2019

Я должен показывать всплывающую подсказку при наведении на элемент SVG.

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

ограничение состоит в том, что элемент SVGсоздан программно, поэтому я не знаю, как создать шаблонный указатель для динамического рендеринга компонента.

У меня вопрос, как я могу построить угловой компонент в виде всплывающей подсказки динамического элемента SVG?

Вот пример на стеке.Я написал код динамического компонента.теперь я должен сделать это динамически при наведении на круг.

@ViewChild('cont', { static:true,read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) { }
@ViewChild('svg', { static: true }) svg: ElementRef

ngAfterViewInit() {
  let circle= document.createElementNS('http://www.w3.org/2000/svg','circle')
  circle.setAttribute('r','40');
  circle.setAttribute('cx','50');
  circle.setAttribute('cy','50');
  //let cont= document.createAttributeNS('http://www.w3.org/2000/svg','#cont')
  //circle.setAttribute('#cont','test')
  this.svg.nativeElement.appendChild(circle)
  this.entry.clear();
  const factory = this.resolver.resolveComponentFactory(TooltipComponent);
  const componentRef = this.entry.createComponent(factory);

}

1 Ответ

0 голосов
/ 27 сентября 2019

Вы можете добавить его либо путем создания пользовательского компонента, либо с помощью всплывающей подсказки непосредственно в SVG.В любом случае вам нужно будет наблюдать за событиями mouseover и mouseout либо SVG, либо элемента круга напрямую, используя RxJS.

Пример этого вы можете увидеть в этом разветвленном стеке.

https://stackblitz.com/edit/angular-9vgjjl-7qmneg?file=app%2Ftooltip-overview-example.ts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...