1

我正在尝试在 Angular 5 中使用这个库 Vivus.js 并且从 Vivus 的构造函数中遇到问题，所以我认为它正在加载库并正确使用它，我想知道是否有人可以让我了解它为什么不拿起我的元素ID。这是图书馆：https ://github.com/maxwellito/vivus

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

这是 id 为“药丸”的 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在标记上使用 an 来等待这个 observable 数据。

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

这是我使用该代码遇到的问题：

ERROR 错误：Vivus [构造函数]：“元素”参数与现有 ID 无关

我也试过这个：

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

我得到了这个问题：

无法读取 null 的属性“构造函数”

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

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

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

为这个页面提供 svg 只是显示，没有动画。在这里感谢任何和所有的帮助，我很想在 Angular 5 中使用这个库来制作 svgs 上的动画。提前致谢。

4

2 回答 2

0

抱歉，我迟到了，但是当我在寻找相同问题的解决方案时，我发现了这个。您可能错过了要放置在 HTML 中的元素。并且不应该放置 SVG

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

<script>
  new Vivus('pill', { duration: 200, file: 'link/to/my.svg' }, myCallback);
</script>
于 2020-01-02T05:38:17.737 回答
-1

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

ngAfterViewInit() {
  const x = new vivus('pill', {duration: 2000}, this.after());
}
于 2018-11-01T10:46:36.473 回答