如何在 Angular 中实现 360° 产品查看器答案

【问题标题】：How to implement a 360° Producti viewer in Angular如何在 Angular 中实现 360° 产品查看器
【发布时间】：2021-06-24 18:57:12
【问题描述】：

我需要将汽车的 36 个图像 (base64) 的数组显示为 360 产品查看器。我用@mediaman 的angular-three-sixty 包试了试运气，但只得到了一张空画布。有人有角度旋转产品画廊的经验吗？

我最近才开始使用 Angular。如果有基于 jQuery 的解决方案，我不介意，但我从未在 Angular 中使用过 jQuery，我不确定如何实现基于 jQuery 的解决方案。

到目前为止，我安装了包，将它导入到我的共享模块中并像这样使用它：

TS：

imageToShow: string[] = [
0: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
1: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
2: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
3: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
...
];

HTML：

<mm-three-sixty [width]="1280"
            [height]="720"
            [angles]="36"
            [anglesPerImage]="6"
            [images]="imageToShow"
            [preload]="true">
</mm-three-sixty>

github 上有关于模型的问题。我也试过这个版本，但结果是一样的。

在控制台中我总是得到这个错误：

错误类型错误：无法读取未定义的属性“nativeElement” 在 ThreeSixtyComponent.ngOnInit (angular-three-sixty.js:62)

这是空白画布：

编辑：

Michael D 的评论帮助消除了错误。图像现在在那里并且可以拖动。不幸的是，它似乎不会覆盖当前显示的图像，而是在拖动时覆盖每个新图像。这是一张图片：

【问题讨论】：

似乎组件正在尝试访问ngOnInit() 挂钩中的模板引用变量canvasElement。对于要渲染的画布来说，这可能为时过早。它应该是 ngAfterViewInit() 钩子。
我应该如何改变它？根据使用指南，我只需要 html 部分和一个数组。我可以告诉 html 等待渲染，直到数组准备好，但这无济于事。无论如何，只要 html 部分呈现，错误就会出现。
您可以在本地调整源代码并尝试将ngOnInit() 更改为ngAfterViewInit()。在这种情况下，不要忘记遵守模块许可证并在到期时提供信用。
感谢您的输入，错误现已消失。我对我的问题进行了编辑，因为发生了一些奇怪的事情。
嗨。有没有人解决这个问题..？

标签： angular typescript

【解决方案1】：

看起来您的问题是在您的项目中没有对 JQuery 的引用。

您可能需要使用npm install jquery 安装它。

完成此操作后，您需要将其作为编译时脚本包含在 angular.json 中。

 ...
  "scripts": []
 ...

关于如何在此线程中执行此操作的好答案：How to use jQuery with Angular?

【讨论】：

我安装了 jquery 并将其导入 app.module.ts 中，但没有成功。