npm install jquery jquery-mobile

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/jquery-mobile/dist/jquery.mobile.min.js"
]

import { Injectable } from '@angular/core';
import * as $ from 'jquery';

@Injectable({
  providedIn: 'root'
})
export class JqueryMobileService {
  constructor() { }

  // 示例：使用jQuery Mobile的页面切换API
  changePage(url: string, options: any = {}): Promise<any> {
    return new Promise((resolve, reject) => {
      $.mobile.changePage(url, {
        ...options,
        transition: 'slide',
        success: resolve,
        error: reject
      });
    });
  }

  // 示例：使用jQuery Mobile的加载数据API
  loadData(url: string): Promise<any> {
    return new Promise((resolve, reject) => {
      $.mobile.loadPage(url, {
        data: { /* 参数 */ },
        type: 'get',
        success: (data) => resolve(data),
        error: (xhr, textStatus, errorThrown) => reject(errorThrown)
      });
    });
  }
}

import { Component } from '@angular/core';
import { JqueryMobileService } from './jquery-mobile.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="navigateToPage()">跳转页面</button>
    <button (click)="fetchData()">加载数据</button>
  `
})
export class ExampleComponent {
  constructor(private jqueryMobileService: JqueryMobileService) {}

  async navigateToPage() {
    try {
      await this.jqueryMobileService.changePage('/target-page');
      console.log('页面跳转成功');
    } catch (error) {
      console.error('页面跳转失败:', error);
    }
  }

  async fetchData() {
    try {
      const data = await this.jqueryMobileService.loadData('/api/data');
      console.log('数据加载成功:', data);
    } catch (error) {
      console.error('数据加载失败:', error);
    }
  }
}