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

然后在订阅Observable之后使用它来确认数据并且有一个对象，因为我在标记上使用*ngIf来等待这个可观察的数据。

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

这是我用该代码获得的问题：

错误错误：Vivus [constructor]：“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

您应该在组件的ngAfterViewInit生命周期中运行代码。因此，在您的组件内部，您将拥有：

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

Answer 2

对不起，我来晚了，但是当我寻找相同问题的解决方案时，发现了这一点。可能您可能错过了要放在HTML中的元素。而且不必放置SVG

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

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

Angular 5 Component中的Vivus.js

2 个答案: