小编Sha*_*ice的帖子

如何正确地将函数传递给Angular2/Typescript中的自定义指令?

我是Angular 2的新手.我正在从AngularJS升级我的应用程序,现在我正处于UI/UX开发的最后阶段.我有一个需要帮助的最后一个问题.先感谢您.

当前计划

  1. 我有一个自定义指令TspFieldWidgetDirective,它接受多个输入,一个是函数@Input('onRefresh') public refresh: Function;.
  2. 所述TspFieldWidgetDirective元件可以各种组件的内部使用重新设计标准的表单字段.
  3. 我使用current指令作为TspHeaderComponent模板中的选择框.
  4. 当用户更改选择框的值时,将OnRefresh调用该函数以刷新应用程序以更新新公司的视图.

什么不起作用

  1. 每次在浏览器中加载TspHeaderComponent模板时,它会产生对OnRefresh函数onCompanyChange的无限循环调用,当它只应被调用一次时,当选择框更改值时.

  2. 当我从浏览器更改选择框的值时(在TspFieldWidgetDirective模板中 - (change)="refresh({'id': fieldData[fieldKey]})",会生成以下错误. ERROR TypeError: _co.refresh is not a function

请注意

  1. 该功能在Angular 5中从未起作用,它在AngularJS中运行得非常好.
  2. 除了将函数作为指令的输入传递外,其他所有工作都有效.

代码片段如下:

tsp-header.component.ts

/*
    Method to change company of the company selector

    @param: id - string
    @return: none
 */
public onCompanyChange(id: string): void {
    if ((__env.debug && __env.verbose)) {
        console.log('Setting current_company_id to ' + …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-directives angular2-template angular2-components angular

5
推荐指数
1
解决办法
568
查看次数