Angular 5组件中的Vivus.js

Question

我正试图在Angular 5中使用这个库Vivus.js，并且从Vivus的构造函数中得到了一些问题，所以我认为它正在加载这个库并正确地使用它，我想知道是否有人可以给我一些洞察，为什么它不能提取我的元素id。这是一个库：https://github.com/maxwellito/vivus

这是我到目前为止所做的：

这是id为‘pill’的svg：

            <svg id="pill" width="450px" height="50px" viewBox="0 0 450 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <path class="svgnew state" [class.active]="order.status === 'new' || order.status === 'pending' || order.status === 'ready'"
                    d="M25,0 L170,0 L130,50 L25,50 C11.1928813,50 1.69088438e-15,38.8071187 0,25 L0,25 C-1.69088438e-15,11.1928813 11.1928813,2.53632657e-15 25,0 Z" id="Rectangle"></path>
                  <polygon class="svgpending state" [class.active]="order.status === 'pending' || order.status === 'ready'"
                    points="170 0 320 0 280 50 130 50"></polygon>
                  <path class="svgready state" [class.active]="order.status === 'ready'"
                    d="M305,2.84217094e-14 L450,2.84217094e-14 L410,50 L305,50 C291.192881,50 280,38.8071187 280,25 L280,25 C280,11.1928813 291.192881,3.0958036e-14 305,2.84217094e-14 Z" id="Rectangle-Copy" transform="translate(365.000000, 25.000000) rotate(-180.000000) translate(-365.000000, -25.000000) "></path>
                </g>
              </g>
            </svg>

下面是我的组件代码：

我像这样导入库：import * as vivus from 'vivus';

当我在标记上使用*ngIf来等待这个可观察数据时，在订阅一个可观察对象确认数据并拥有一个对象之后，就会使用这个对象。

const x = new vivus('pill', {duration: 2000}, this.after());

这就是我在代码中遇到的问题：

错误: Vivus构造函数："element“参数与现有ID无关

我也尝试过这个：

const x = new vivus(document.getElementById('pill'), {duration: 2000}, this.after());

我得到了这个问题：

无法读取null的属性“constructor”

这些问题似乎是在Vivus调用其setElement()方法的过程中发生的。

我已经找到了vivus的类型，不知道是否也应该安装这些：https://libraries.io/npm/@types%2Fvivus

如果您需要在我的标记或在确认数据后运行vivus对象创建的Observable订阅中看到更多代码，请让我知道。

在这个页面上，svg只是显示出来，并没有动画效果。感谢这里的任何帮助，我很乐意在Angular 5中使用这个库来制作svgs上的动画。提前谢谢。

Answer 1

抱歉，我来晚了，但当我在寻找相同问题的解决方案时，我发现了这个。您可能遗漏了要放在HTML中的元素。并且不应该将SVG

<div id="pill"></div>

<script>
  new Vivus('pill', { duration: 200, file: 'link/to/my.svg' }, myCallback);
</script>

Answer 2

您应该在组件的ngAfterViewInit生命周期中运行您的代码，因为在初始化视图之前'pill‘不可用。因此，在您的组件中，您将拥有：

ngAfterViewInit() {
  const x = new vivus('pill', {duration: 2000}, this.after());
}