Angular 5 组件中的 Vivus.js答案

【问题标题】：Vivus.js in Angular 5 ComponentAngular 5 组件中的 Vivus.js
【发布时间】：2021-06-17 04:53:38
【问题描述】：

我正在尝试在 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 来等待这个 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 中使用这个库来制作 svg 上的动画。提前致谢。

【问题讨论】：

标签： angular svg vivus

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：