Angular2:从javascript函数调用组件方法[重复]

2024-01-22

目前我正在尝试实现引导日期选择器,它使用jQuery,以及我的 Angular2 项目。这是我到目前为止所拥有的:

import {Component, AfterViewInit, Injector, Inject} from '@angular/core';
import {ObservableService} from "../../../services/data-observable.service";
declare var $:any;

@Component({
    selector: 'date-range',
    moduleId: module.id,
    template: `<input name="daterange" class="filter-date-range"/>`
})

export class DateRange implements AfterViewInit {

    options = { locale: {
        format: 'YYYY-MM-DD'
    },
        startDate: '2013-01-01',
        endDate: '2013-12-31'};

    constructor(@Inject(Injector) private injector: Injector,
                @Inject(ObservableService) private _observable: ObservableService) { }

    ngAfterViewInit() {
        $('input[name="daterange"]').daterangepicker(
            this.options,
            function (start, end) {
                let obj = {};
                obj['start'] = start;
                obj['end'] = end;

                this._observable.updateFilter(obj);
            }
        );
    }
}

一切都很完美,除了这段代码

this._observable.updateFilter(obj);

我在这里尝试路径ObservableService方法调用到daterangepicker回调函数,每次日期值更改时都会激活该函数。所以,我得到了

Uncaught TypeError: Cannot read property 'updateFilter' of undefined

error.

我如何调用 Angular2 组件、服务或其他内部的方法js功能?


在回调中使用箭头函数:

     $('input[name="daterange"]').daterangepicker(
        this.options,
        (start, end) => {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }
    );

或者使用Function的bind方法:

     $('input[name="daterange"]').daterangepicker(
        this.options,
        function (start, end) {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }.bind(this);
    );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2:从javascript函数调用组件方法[重复] 的相关文章

随机推荐

  • 针对 Boost.Log 的 g++ 静态链接错误

    静态链接 Boost Log 时出现链接错误 编译器版本是g 4 8 1 Boost版本是1 55 0 我可以毫无问题地进行动态链接 在 make 文件中使用 DBOOST LOG DYN LINK 但是当我进行静态链接时 会出现链接错误
  • 如何处理 JSON_VALUE 路径中的美元 ($) 符号

    我们将数据作为 JSON 字符串存储在数据库中 由于使用 Newtonsoft JSON 此数据包含键中带有 符号的字段 是否可以使用MSSQL中的JSON VALUE函数查询这些字段 我尝试的查询抛出异常JSON 路径格式不正确 在位置
  • 如何使用 Silex 框架实现自定义身份验证成功处理程序?

    我想在用户登录时跟踪一些数据 成功和失败 但我真的不知道该怎么做 防火墙看起来像这样 app gt register new Silex Provider SecurityServiceProvider array security fir
  • 使用Spring事务管理“Propagation.REQUIRES_NEW”到底意味着什么?

    我与此事相关的困惑是我们如何使用之前创建的交易 或者换句话说 一个事务可以与多少个线程相关 在 Spring 中 一笔事务只能与一个线程相关 好吧 通过一些努力 您可以使其成为一个长期运行的事务 但这是一种反模式 REQUIRES NEW意
  • “所需的许可被拒绝!”请求 WRITE_EXTERNAL_STORAGE 时

    我正在尝试在 Android 10 上请求 WRITE EXTERNAL STORAGE 权限 我使用以下代码执行此操作 ArrayList
  • imageWithContentsOfFile 与 imageNamed (imageWithContentsOfFile 返回低质量图像)

    有一次 我把所有的图片放在APP Bundle中 我使用 imageNamed 函数来获取图像 后来 我决定在应用程序启动时将一些图片复制到文档中 因此 我无法再使用 imageNamed 函数来获取图像 我使用 imageWithCont
  • 更改左侧工具栏默认图标

    我目前在顶部使用工具栏 并希望用主页按钮替换默认的后退按钮 但是当我添加项目时 它总是添加到右侧 我也没有看到任何layout gravity选项可供选择 有没有办法做到这一点 主要活动 Toolbar toolbar Override p
  • jQuery/Javascript 暂时禁用 addEventListener/attachEvent 附加的事件

    有没有办法暂时禁用事件侦听器 就我而言 我有一个第三方库 not以 jQuery 为中心 使用以下方法在元素上创建 mouseover mouseout 事件添加事件监听器 附加事件 在某些情况下 另一个事件会在不同的元素上触发 我需要禁用
  • 如何在 R 中保存二值图像的 XY 坐标?

    I am trying to save the XY coordinates of a binary image in R similarly to the save Save XY Coordinates function in Imag
  • 加载前检查文件是否存在

    我想要做的是在 Material Widget 中加载图像以在 ListTile 中使用它 但该资源可能不存在 class MyImage extends StatelessWidget final imagePath MyIcon Str
  • 如何判断多面体是否是凸多面体?

    我正在寻找一种有效的算法来确定多面体是否是凸的 我首先检查欧拉特征是否为 2 我还检查每个面是否都是凸面 但这仍然没有抓住很多案例 看一下这个 http liam flookes com cs geo http liam flookes c
  • 关于 C# RFID 线程的问题

    我的问题是寻求反馈 以确保我采取正确的方法并正确处理线程 我有一种感觉 我可能需要设置一些我自己的线程 所以欢迎所有反馈 我遇到的问题是从零个或多个 RFID 阅读器读取 RFID 标签 我可以毫无问题地为单个读者阅读 因此从多个读者那里阅
  • Django 表单和标题属性

    我需要使用属性 title 来渲染我的表单以进行 jquery 验证 以这种方式渲染我的表单怎么办
  • 自己编码的聊天中的 ListView Rowlayout

    我正在尝试做什么 我正在尝试创建一个必须不同行的聊天 对于每一行我都制作了一个自己的布局文件 但问题是其中一行的布局文件不适合屏幕 Question 我需要在行布局中更改哪些内容才能使其适合应有的效果 您会找到代码以及我正在尝试的打印屏幕
  • 为什么这个函数会多次触发?

    我正在填写这个清单 ul ul 使用 jquery 生成文件夹列表 生成以下 HTML ul li Item 1 li li Item 2 li li Item 3 ul li Sub Item li ul li ul
  • 如何在Jackson ObjectMapper的序列化中添加@JsonIgnore注释字段

    我需要添加 JsonIgnore序列化对象时带注释的字段Jackson ObjectMapper 我知道您可能会建议我删除 JsonIgnore我的类中的注释 但我需要它们在我的应用程序的某些部分可以忽略 在我的应用程序的另一部分我需要那些
  • 滥用比赛?

    您是否会考虑以下代码块匹配滥用 如果是这样 在没有大的 if else if 块的情况下 有什么更优雅的方法可以做到这一点 def sum base Int xs List Int Int base match case 0 gt 1 ca
  • “模糊引用”错误两次指向同一方法

    I used 这个绝妙的解决方案 https stackoverflow com questions 3509290 how to convert a linq result to datatable 3767520 3767520将 li
  • Enterprise Library 5.0安装错误

    此应用程序需要 NET Framework 3 5 SP1 请安装 net Framework 然后再次运行此安装程序 但系统已经安装了 net Framework 4 0 在添加删除程序中我可以看到以下两个条目 1 Microsoft N
  • Angular2:从javascript函数调用组件方法[重复]

    这个问题在这里已经有答案了 目前我正在尝试实现引导日期选择器 它使用jQuery 以及我的 Angular2 项目 这是我到目前为止所拥有的 import Component AfterViewInit Injector Inject fr