如何从JS代码调用TS函数并传递变量值？附场景示例代码

我刚好碰到过类似的需求，咱们一步步来解决这个问题。先看你给出的现有代码：

现有代码 #

home.html #

<div id="mainDiv">
  <span action="10004">Quick Task</span>
</div>

home.ts #

//declare var $: any;
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// import $ ...的内容

接下来咱们一步步改造，实现你要的功能：

步骤1：确保jQuery在项目中可用 #

首先得让jQuery能在home.ts里正常调用：

• 如果你是通过CDN在项目中引入的jQuery，记得把home.ts里的declare var $: any;注释解开，这样TypeScript就能识别$变量了。
• 如果你是通过npm安装的jQuery（执行npm install jquery --save），那就在home.ts里加上导入语句：import * as $ from 'jquery';

步骤2：修改HTML绑定事件 #

给需要点击的span和触发函数的按钮加上点击事件，同时传递点击对象：

<div id="mainDiv">
  <span action="10004" (click)="storeActionValue($event)">Quick Task</span>
  <button (click)="triggerTargetFunction()">执行目标函数</button>
</div>

步骤3：在home.ts中实现逻辑 #

咱们在组件里定义一个变量存储属性值，然后实现获取属性和调用函数的方法：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// CDN引入的话解开下面的注释
declare var $: any;
// npm安装的话用下面的导入
// import * as $ from 'jquery';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 用来存储获取到的action属性值
  private actionValue: string;

  constructor(public navCtrl: NavController) {}

  // 获取并存储span的action属性值
  storeActionValue(event: Event) {
    // 用jQuery获取属性值
    this.actionValue = $(event.target).attr('action');
    // 其实Angular里也可以用原生JS方式，更轻量：
    // this.actionValue = (event.target as HTMLElement).getAttribute('action');
  }

  // 调用目标函数并传入属性值
  triggerTargetFunction() {
    // 先判断值是否存在，避免空值问题
    if (this.actionValue) {
      this.yourActualFunction(this.actionValue);
    }
  }

  // 这里替换成你实际要调用的函数
  yourActualFunction(value: string) {
    console.log('传入的action属性值是:', value);
    // 在这里编写你的业务逻辑
  }
}

补充说明 #

• 点击span的时候，会触发storeActionValue方法，通过$event拿到点击的DOM元素，再用jQuery的attr方法提取action属性值，存到组件的actionValue变量里。
• 点击按钮时，triggerTargetFunction会把存储的属性值传入你需要调用的函数中。
• 额外提一句：如果你的项目不是必须依赖jQuery，其实更推荐用原生JS的方式获取属性（上面代码里注释的部分），这样能减少项目的依赖体积，更符合Angular的开发习惯。

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