咨询Ionic3内部页面使用自定义jQuery插件及脚本的解决方法

这个问题其实挺常见的——因为Ionic3的页面是懒加载的，首页加载的脚本只会绑定到当时存在的DOM元素上，当你通过NavCtrl跳转到新页面时，新页面的DOM是后续才渲染出来的，之前加载的脚本自然不会对这些新DOM生效。下面给你几个靠谱的解决办法：

1. 在页面的ionViewDidEnter生命周期钩子中初始化脚本 #

Ionic页面有自己的生命周期，ionViewDidEnter是页面完全进入并渲染完成后触发的，这时候页面的DOM已经准备好了，刚好适合初始化你的插件。

举个例子，假设你有个jQuery插件叫myCustomPlugin：

import { Component } from '@angular/core';
declare var $: any; // 声明jQuery，避免TypeScript报错

@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {

  constructor() {}

  ionViewDidEnter() {
    // 在这里初始化你的jQuery插件
    $('#target-element').myCustomPlugin({
      // 插件配置项
      option1: 'value1',
      option2: 'value2'
    });
  }
}

2. 把脚本封装成Angular服务（更优雅的复用方式） #

如果你的脚本需要在多个页面复用，把它封装成Angular服务是更好的选择，这样可以统一管理，避免重复代码。

步骤大概是这样：

• 先创建一个服务，比如ScriptLoaderService：

import { Injectable } from '@angular/core';
declare var $: any;

@Injectable()
export class ScriptLoaderService {

  initMyPlugin(elementSelector: string, config?: any) {
    // 封装插件初始化逻辑，支持自定义配置
    $(elementSelector).myCustomPlugin({
      // 默认配置
      ...config
    });
  }
}

• 然后在需要的页面注入这个服务，在ionViewDidEnter里调用：

import { Component } from '@angular/core';
import { ScriptLoaderService } from '../services/script-loader.service';

@Component({
  selector: 'page-third',
  templateUrl: 'third.html'
})
export class ThirdPage {

  constructor(private scriptService: ScriptLoaderService) {}

  ionViewDidEnter() {
    this.scriptService.initMyPlugin('#third-page-element', {
      option1: 'custom-value'
    });
  }
}

3. 确保脚本全局加载的正确姿势 #

如果你希望脚本在全局可用，确保它在index.html里按正确顺序引入，但不要直接在index.html里写初始化代码——因为这时候只有首页的DOM存在。正确的做法是把初始化逻辑放到每个页面的生命周期钩子中，就像第一个方法那样。

比如index.html里的引入顺序要注意：

<!-- 先引入jQuery，再引入依赖它的自定义插件 -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/my-custom-plugin.js"></script>

4. 用Angular指令替代直接DOM操作（推荐规范写法） #

虽然jQuery插件用起来方便，但Angular更推荐用数据驱动的方式操作视图。如果可能的话，你可以把jQuery插件逻辑封装成Angular指令，这样更符合Ionic/Angular的开发规范，也能避免手动DOM操作带来的问题。

比如，封装一个对应插件的指令：

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
declare var $: any;

@Directive({
  selector: '[appMyPlugin]'
})
export class MyPluginDirective implements OnInit {
  @Input() appMyPluginConfig: any; // 支持传入配置

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 直接对指令绑定的元素初始化插件
    $(this.el.nativeElement).myCustomPlugin({
      ...this.appMyPluginConfig
    });
  }
}

然后在页面模板里直接用：

<div appMyPlugin [appMyPluginConfig]="{ option1: 'test' }"></div>

这样指令会在元素初始化时自动调用插件，不用手动在生命周期里写代码，非常省心。

内容的提问来源于stack exchange，提问作者Naveenkumar A