正文 

当前位置： 首页 > 知识 >

Angular 2 从 Jquery 调用 Typescript 函数会导致未捕获的 TypeError

     2023-03-13     196

关键词：

【中文标题】Angular 2 从 Jquery 调用 Typescript 函数会导致未捕获的 TypeError【英文标题】：Angular 2 calling a Typescript function from Jquery causes uncaught TypeError 【发布时间】：2016-09-04 14:19:31 【问题描述】：

我有一个带有输入文本字段的组件，我使用 JQuery 附加了一个输入事件侦听器。当输入的值发生变化时，我想调用一个 Typescript 函数，但它会抛出一个未捕获的 TypeError。

这是我的代码：

import Component, Input, Output, EventEmitter, ElementRef, OnInit from 'angular2/core';
declare var jQuery: any;

@Component(
    selector: 'setting-priority',
    template: '<input [(ngModel)]="priority" class="setting-priority" type="text">'
)

export class SettingPriorityComponent implements OnInit
    @Input() priority: number;
    @Output() prioChanged: EventEmitter<number> = new EventEmitter();

    constructor(private elementRef:ElementRef)  

    ngOnInit() 
        jQuery(this.elementRef.nativeElement).find('input').on('input', function() 
            // Here I will pass the changed value to onChange function
            this.onChange();
        );
    

    ngOnChanges(changes)  
        this.prioChanged.emit(this.priority);
    

    // In this function I will receive the value and assign it to the priority variable
    onChange() 
        console.log("onchange!");

我正在使用 Jquery，因为输入值将以编程方式设置 - 在这种情况下，Angular 的更改检测不起作用Details here

当我触发输入事件时，我收到 Uncaught TypeError: this.onChange is not a function

我做错了什么？

【问题讨论】：

【参考方案1】：

我会使用箭头函数。这样你就可以使用词法 this（对应于组件实例）：

jQuery(this.elementRef.nativeElement).find('input').on('input', () => 
  this.onChange();
);

查看此链接了解更多详情： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：

效果很好！谢谢！顺便说一句，我找到了另一种方法 - 将 JavaScript 变量绑定到角度上下文，然后使用它调用函数：var self = this;jQuery(this.elementRef.nativeElement).find('input').on('input', function self.onChange(); );【参考方案2】：

尽量避免在Angular2中使用jQuery。

获取对元素的引用的更棱角分明的方法是

@Component(
    selector: 'setting-priority',
    template: '<input #prio [(ngModel)]="priority" class="setting-priority" type="text">'
)
export class SettingPriorityComponent implements OnInit
  @ViewChild('prio') priority;

  ngOnInit() 
    console.log(this.priority);

但要添加事件处理程序，您只需要：

template: '<input [(ngModel)]="priority" (input)="onChange()" class="setting-priority" type="text">'

【讨论】：

谢谢！我正在使用 Jquery-UI 使用拖放操作使表格可排序，因为我没有为原生 Angular 2 找到如此简单的解决方案。

在 Angular 2 中使用 Jquery 函数调用

】在Angular2中使用Jquery函数调用【英文标题】：UsingJqueryfunctioncallwithAngular2【发布时间】：2020-05-1909:16:16【问题描述】：我正在尝试在我的Angular2应用程序上使用这个convFormjquery插件。我已成功将jquery和convForm安装到我的项目中，... 查看详情

如何从 http 调用映射 Angular 2 类

】如何从http调用映射Angular2类【英文标题】：Howtomapanangular2classfromanhttpcall【发布时间】：2018-08-3008:56:32【问题描述】：我是Angular的新手。我有一个名为User的类：exportclassUserprivateid:number;privatename:string;privatesurname:string;getId():number... 查看详情

Angular 2：从订阅 http.post 获得响应后如何调用函数

】Angular2：从订阅http.post获得响应后如何调用函数【英文标题】：Angular2:Howtocallafunctionaftergetaresponsefromsubscribehttp.post【发布时间】：2017-07-0311:46:25【问题描述】：从httppost请求中获取数据后需要调用一个方法服务：request.service.TSge... 查看详情

从 Postman 调用 Twitter API 有效，但从 Angular 2 应用程序调用却不行

】从Postman调用TwitterAPI有效，但从Angular2应用程序调用却不行【英文标题】：CallingTwitterAPIfromPostmanworks,butfromAngular2appitdoesnt\'【发布时间】：2016-07-3008:25:27【问题描述】：我正在尝试在我的应用中使用TwitterAPI。当我从Postman运行它... 查看详情

从纯 Javascript/JQuery 调用 Angular js 函数

】从纯Javascript/JQuery调用Angularjs函数【英文标题】：CallaangularjsfunctionfrompureJavascript/JQuery【发布时间】：2019-03-0119:21:30【问题描述】：我已经在我的项目中包含了angularjs并写了一个函数名“hasOrganizationPermission”如下所示。我正在... 查看详情

从角度 2 调用 laravel 后端 api

...角度2调用laravel后端api【英文标题】：Calllaravelbackendapifromangular2【发布时间】：2017-06-0418:19:48【问题描述】：我正在开发一个以angular2为前端的网站和一个以dingo为前端的laravelapi。现在我想从这个api中获取angular2的数据。但我当然... 查看详情

可重用的 jQuery 函数 - Angular

】可重用的jQuery函数-Angular【英文标题】：ReusablejQueryFunction-Angular【发布时间】：2021-04-2620:28:30【问题描述】：我有一个自调用jQuery函数，它为表列添加了重新调整大小的功能（来源：https://codepen.io/jasongardner/pen/QNOXym）从AfterViewI... 查看详情

从 Javascript 调用 Grafana Angular TimePickerCtrl 函数

】从Javascript调用GrafanaAngularTimePickerCtrl函数【英文标题】：CallingGrafanaAngularTimePickerCtrlfunctionfromJavascript【发布时间】：2019-02-0320:13:35【问题描述】：我正在为自助服务终端模式下的嵌入式Grafana(v5.2.2)iframe创建自己的日期范围选择... 查看详情

API调用后未更新Angular 2视图

】API调用后未更新Angular2视图【英文标题】：Angular2viewnotupdatedafterAPIcall【发布时间】：2017-05-1013:44:35【问题描述】：我有一个angular2组件，在其中我有一个通过调用服务方法从API调用填充数据的方法。getData()this.someBinding="Initialval... 查看详情

有没有办法从客户端应用程序中调用 Firebase 服务器“功能”，比如 Angular 2？

...法从客户端应用程序中调用Firebase服务器“功能”，比如Angular2？【英文标题】：IsthereawaytocallaFirebaseserver"function"fromwithinaclientapp,saywithAngular2?【发布时间】：2017-08-3120:00:34【问题描述】：因此，Firebase提供了一种称为“函... 查看详情

带有 MVC 的 Angular CLI 从 API 调用返回 404

】带有MVC的AngularCLI从API调用返回404【英文标题】：AngularCLIwithMVCreturning404fromAPIcall【发布时间】：2022-01-1216:14:51【问题描述】：我正在开发一个组合的.NetCore3.1、Angular8项目。Angular代码嵌入在包含MVC代码的VisualStudio项目中，位于Cl... 查看详情

使用 Angular 2 调用 Web API 控制器

】使用Angular2调用WebAPI控制器【英文标题】：CallwebAPIcontrollerusingAngular2【发布时间】：2016-08-0912:19:10【问题描述】：我是Angular2的新手。我想在我的MVC6项目中使用Angular2调用API。我尝试了很多事情（包括Angular2callingASP.NETWebAPI的指... 查看详情

Angular2 - 从另一个独立组件调用函数。基本上，从外部组件调用函数

】Angular2-从另一个独立组件调用函数。基本上，从外部组件调用函数【英文标题】：Angular2-callafunctionfromanotherstandalonecomponent.Basically,callfunctionfromoutsidecomponent【发布时间】：2021-07-2521:05:14【问题描述】：我正在一个组件（Component1... 查看详情

从javascript调用angular的函数

从vanillajavascript调用angular的函数：*调用service中的函数varyourService=angular.element(document.body).injector().get(‘NetService‘)yourSevice.yourFunctionName();*调用controller中的函数angular.element(document.getElemen 查看详情

从 Angular 2 服务创建和返回 Observable

】从Angular2服务创建和返回Observable【英文标题】：CreatingandreturningObservablefromAngular2Service【发布时间】：2016-02-1323:54:58【问题描述】：这更像是一个“最佳实践”问题。共有三个玩家：Component、Service和Model。Component正在调用Service... 查看详情

Angular 5 和 jQuery：（点击）不调用函数

】Angular5和jQuery：（点击）不调用函数【英文标题】：Angular5andjQuery:(click)notcallingfunction【发布时间】：2020-06-0202:13:21【问题描述】：我目前正在使用Angular5和jQuery。我通过jQuery创建了一个动态div，并将其附加到一个div中。varpush_di... 查看详情

Angular 2 如何从后端读取自定义错误消息

】Angular2如何从后端读取自定义错误消息【英文标题】：Angular2howtoreadCustomerrormessagefrombackend【发布时间】：2016-12-3011:47:34【问题描述】：Angular2的问题在AngularJS中不存在，我将错误消息作为带有后端API调用的字符串发送，以防出... 查看详情

Webpack - 在 Angular 2 中调用外部 JS

】Webpack-在Angular2中调用外部JS【英文标题】：Webpack-CallexternalJSinAngular2【发布时间】：2017-02-0123:16:09【问题描述】：我希望从systemJS换成webpack。除了让我的一个外部脚本再次运行之外，大多数设置似乎都在工作。以前使用systemJS... 查看详情