如何在Angular路由加载的组件中使用DearFlip jQuery插件？

原因 #

• DearFlip插件默认在页面初始加载完成后，自动扫描并初始化所有带有_df_book类的DOM元素。但通过<router-outlet>加载的组件是动态渲染的，组件DOM生成时，插件的自动初始化逻辑已经执行完毕，无法识别新添加的元素。
• 直接放在index.html中的元素属于页面初始DOM的一部分，插件初始化时能正常扫描到，因此可以正常运行。

解决办法 #

1. 手动触发插件初始化 #

利用Angular组件的ngAfterViewInit生命周期钩子（该钩子在组件视图完全渲染到DOM后执行），手动调用DearFlip的初始化方法：

组件代码：

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
declare var $: any; // 声明jQuery，解决TypeScript类型报错

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent implements AfterViewInit, OnDestroy {

  ngAfterViewInit(): void {
    // 手动初始化翻书插件
    $('#flipbook').flipBook({
      source: 'assets/pdf/assouka_mag.pdf'
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时清理插件实例，避免内存泄漏
    $('#flipbook').flipBook('destroy');
  }
}

组件模板（pdf-viewer.component.html）：

<div id="flipbook" class="_df_book"></div>

2. 确认脚本加载顺序 #

在index.html中必须先引入jQuery，再引入DearFlip插件脚本，否则插件无法正常依赖jQuery运行：

<!-- 先引入jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- 再引入DearFlip -->
<script src="assets/js/dearflip.min.js"></script>

3. 处理路由切换后的重复渲染问题 #

如果组件会被多次路由访问，在ngOnDestroy中销毁插件实例，避免重复初始化导致的DOM冲突或内存泄漏（上述组件代码已包含此逻辑）。

内容的提问来源于stack exchange，提问作者socrates EKPALIGUIDIME