如何在Angular 13中使用photoswipe 5

Question

我希望能够在 Angular 13 中使用新的 photoswipe 5 库，但是无法正常导入。

错误：无法找到模块 'photoswipe/lightbox' 或其相应的类型声明.ts。

他们的主页上有纯JavaScript、Vue和React的示例，但没有Angular的示例。有什么办法可以让它工作吗？

谢谢。

复现问题：

1. 安装Angular CLI

npm install -g @angular/cli

2. 创建新的Angular应用程序

ng new ng-photoswipe --style scss --routing false

3. 检查应用程序是否正在运行

cd ng-photoswipe
npm start

4. 安装photoswipe

npm install photoswipe --save

5. 添加示例代码

将app.component.html中的HTML代码替换为：

<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
  <a
    href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
    data-pswp-width="1669"
    data-pswp-height="2500"
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
  </a>
  <a
    href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
    data-pswp-width="1875"
    data-pswp-height="2500" data-cropped="true" target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
  </a>
</div>

将 app.component.ts 中的 ts 代码替换为

import { AfterContentInit, Component, NgZone } from '@angular/core';

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
import 'photoswipe/style.css';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterContentInit {
  constructor(private ngZone: NgZone) {}

  ngAfterContentInit(): void {
    this.ngZone.runOutsideAngular(() => {
      const lightbox = new PhotoSwipeLightbox({
        gallery: '#gallery--getting-started',
        children: 'a',
        pswpModule: PhotoSwipe,
      });

      lightbox.init();
    });
  }
}

因为我们还没有将photoswipe.d.ts类型文件添加到与代码相邻的app.component.ts中。

declare module 'photoswipe';

6. 再次尝试运行

npm start

在控制台中构建时，我遇到了以下错误

Error: src/app/app.component.ts:3:32 - error TS2307: Cannot find module 'photoswipe/lightbox' or its corresponding type declarations.

3 import PhotoSwipeLightbox from 'photoswipe/lightbox';

7. 更多信息

从PhotoSwipe的packages.json中导出： https://github.com/dimsemenov/PhotoSwipe/blob/master/package.json

"exports": {
    ".": "./dist/photoswipe.esm.js",
    "./lightbox": "./dist/photoswipe-lightbox.esm.js",
    "./dist/photoswipe.css": "./dist/photoswipe.css",
    "./photoswipe.css": "./dist/photoswipe.css",
    "./style.css": "./dist/photoswipe.css"
  },

我的问题：

• 为什么这里的导入(import)不起作用？
• 与其他框架（如vue、react或纯javascript导入）有何区别？（请参见photoswipe示例）
• 库的作者是否有所作为？

在编写此示例时，我解决了自己的问题。 添加缺少的类型和导入CSS解决了此问题。

https://github.com/dimsemenov/PhotoSwipe/issues/1881

- zedL

---

@zedL，你能告诉我如何修改CSS以及你使用的版本吗？默认情况下，我收到全屏显示，但无法在单击关闭按钮时关闭弹出窗口。 :| - Vijayendra Mudigal

angular.json => "styles": [ "node_modules/photoswipe/dist/photoswipe.css", "src/styles.scss" ] 角度配置文件 =>“样式”：[ “node_modules/photoswipe/dist/photoswipe.css”， “src/styles.scss” ] - zedL

在 Github 的问题追踪中，我添加了一个完整的可工作示例 https://github.com/dimsemenov/PhotoSwipe/issues/1881 - zedL

Answer 1

我在React上遇到了这个问题，不得不将我导入该包的组件从.tsx更改为.jsx

不过应该有更好的解决方法。

- Alex Howez