我正在开发 Angular 10 项目，希望集成 photo-sphere-viewer 库来显示 360 度图像。但是，我在 Angular 10 中正确设置它时遇到困难。我已经使用 npm 安装了 photo-sphere-viewer，但我不确定如何在我的 Angular 组件中正确导入和使用它。 任何人都可以提供如何在 Angular 10 中实现 photo-sphere-viewer 的分步指南或示例吗？
任何有关 Angular 兼容性最佳实践的建议也将不胜感激。
提前致谢！
首先我们可以使用以下命令安装库
photo-sphere-viewernpm install @photo-sphere-viewer/core
然后我们需要使用以下命令安装它的依赖项
three.jsnpm i three.js
npm i --save-dev @types/three
确保您拥有正确解决方案的元定义，如入门指南中所述。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My app</title>
<meta charset="UTF-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
您必须包含照片查看器的相关 CSS。我将其添加到全局样式 css 文件中。
@import '../node_modules/@photo-sphere-viewer/core/index.css';
html,
body,
#viewer {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
}
您可以创建一个自定义指令
PhotoSphereViewerDirectivengAfterViewInit@Directive({
selector: '[photoSphereViewer]',
standalone: true,
})
export class PhotoSphereViewerDirective {
@Input('photoSphereViewer') viewerConfig = {};
element = inject(ElementRef);
ngAfterViewInit() {
const viewer = new Viewer({
container: this.element.nativeElement,
...this.viewerConfig,
});
}
}
最后，我们通过将其添加到
imports这里使用的是 Angular 10，因此没有独立组件，您需要做的就是摆脱指令装饰器的
standalone: true@Component({
selector: 'app-root',
standalone: true,
imports: [PhotoSphereViewerDirective],
styles: [`:host {display: block;height:100vh;width:100vh}`],
template: `
<div [photoSphereViewer]="viewerConfig" id="viewer"></div>
`,
})
export class App {
viewerConfig = {
panorama:
'https://upload.wikimedia.org/wikipedia/commons/4/46/Greenland_scenery.jpg',
};
}