如何将 bootstrap 弹出窗口绑定添加到我的 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

我不确定这是否可以 angular 方式完成，即 ng-bootstrap。或者，您可以使用简单的 bootstrap 并添加弹出窗口 pragmatically.So 首先在 index.html 页面上添加 bootstrap 所需的文件（我已经跳过添加 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

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

How can I add bootstrap popover binding to my HTML?

svg

twitter-bootstrap

ng-bootstrap

angular