如何将引导弹出窗口绑定添加到我的 HTML？

Question

我有一个SVG，里面有一个rect 元素，点击矩形时我会看到一个警报。

我想用bootstrap popover 替换它，就像下面的按钮，我该怎么做？它必须是代码而不是 HTML

这是我要解决的问题的Stackblitz

    import { Component, Input, AfterViewInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'hello',
  template: `

  <svg #mySvg width="400" height="400">
</svg>
<br> <br><br>

  <button type="button" class="btn btn-outline-secondary mr-2" placement="right"
        ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
  Should Mimic this
</button>

  `,
  styles: [`svg {
  border: 1px solid #000000;
}`]
})
export class HelloComponent implements AfterViewInit {
  @Input() name: string;
  @ViewChild('mySvg', { static: false }) mySvg: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {

    const svg = this.mySvg.nativeElement;
    const svgNS = svg.namespaceURI;
    const rect = this.renderer.createElement('rect', svgNS);
    const clickedOnRect = () => {
      alert('Rectangle was clicked');
    }

    rect.setAttributeNS(null, 'x', '100');
    rect.setAttributeNS(null, 'y', '100');
    rect.setAttributeNS(null, 'width', '100');
    rect.setAttributeNS(null, 'height', '100');
    rect.setAttributeNS(null, 'fill', "transparent");
    rect.setAttributeNS(null, 'stroke', "red");
    rect.setAttributeNS(null, 'stroke-width', '5');
    rect.setAttributeNS(null, 'tab-index', '1');
    rect.setAttributeNS(null, 'cursor', 'pointer');
    rect.addEventListener('click', ($event) => {
      clickedOnRect();
    });

    svg.appendChild(rect);
  }
}

注意：我想将弹出框附加到 rect 元素而不是 svg

Answer 1

我不确定这是否可以以角度方式完成，即 ng-bootstrap。或者，您可以使用简单的引导程序并务实地添加弹出框。因此，首先在您的 index.html 页面上添加引导程序所需的文件（我已经添加了 css，因为 css 已经包含在 ndb 中）

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

然后在你的组件中

declare var $ ;

$(react).popover({content:'Rectangle was clicked'});

Working Stackblitz