那些遇到过的问题

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

Sha*_*ice 5 typescript angular2-directives angular2-template angular2-components angular

我是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 ' + id);
    }

    if (id !== undefined && id !== null)
    {
        // @TODO: Update user preference on server IF they have permission to change their default company
        this.cookies.set('preferences.current_company_id', id);
        this.core.app.current_user.preferences.current_company_id = id;
        this.core.initApp();

        this.router.navigate(['/app/dashboard']);
    }
}
Run Code Online (Sandbox Code Playgroud)

tsp-header.html

<!-- company changer -->
<li>
  <tsp-field-widget 
      type="company-select" 
      [onRefresh]="onCompanyChange(id)" 
      [showAvatar]="true"
      [fieldData]="core.app.current_user.preferences"
      fieldKey="current_company_id" 
      [hideLabel]="true"
      [optionData]="core.app.session.base_companies">
  </tsp-field-widget>
</li>
Run Code Online (Sandbox Code Playgroud)

tsp-field-widget.component.ts

// Component class
@Component({
  selector: 'tsp-field-widget',
  templateUrl: './templates/tsp-field-widget.html'
})
export class TspFieldWidgetComponent implements OnInit {
  public lang:any; // for i18n

  @Input() public type: string; // the field type
  @Input() public isRequired: boolean; // is the field required
  @Input() public isReadonly: boolean;

  @Input() public index: any; // index of ng-repeat
  @Input() public filterBy: any; // used in conjunction with ng-repeat
  @Input() public orderBy: any; // used in conjunction with ng-repeat
  @Input() public fieldData: any; // the record of ng-repeat
  @Input() public fieldKey: string; // the index of record - record[fieldKey]
  @Input() public placeVal: string; // the placeholder value of the field, usually used for selects and other dropdowns
  @Input() public pattern: string; // used for ng-pattern
  @Input() public prefix: string; // Text to display before title listings

  @Input() public recordId: any; // the ID of the record
  @Input() public label: string; // the label for the field for <label> tag
  @Input() public suffix: string; // sub label, usually placed below some label or title
  @Input() public optionData: any[]; // array of data used to populate selects or to store data values
  @Input() public showAvatar: boolean; // show the fields avatar
  @Input() public hideLabel: boolean; // show the fields <label>
  @Input() public showAdd: boolean; // show the add button (to add new record)
  @Input() public showTitle: boolean; // avatar type: show the name of the user
  @Input() public showDesc: boolean; // avatar type: show the name of the user
  // @Input() public isHighlighted:boolean; // default type: highlight text
  @Input() public numRows: string; // textarea: the number of rows of the text area
  @Input() public idKey: string; // select: the default ID key for option data - defaults to _id
  @Input() public titleKey: string; // select: the default title key for option data - defaults to title
  @Input() public descKey: string; // select: the default description key for option data - defaults to description

  @Input() public sliderType: string; // percent, amount or default, slider type
  @Input() public sliderMinValue: string; // slider type
  @Input() public sliderMaxValue: string; // slider type
  @Input() public sliderStepValue: string; // slider type
  @Input() public sliderOrientation: string; // slider type

  @Input() public dzOptions: any; // dropzone options
  @Input() public dzCallbacks: any; // dropzone callbacks
  @Input() public dzMethods: any; // dropzone methods

  @Input() public decimalPlaces: string; // tspFormat type

  @Input() public locale: string; // for dates and currency
  @Input() public format: string; // for dates
  @Input() public formatHours: string; // for dates
  @Input() public intervalMins: number; // for dates
  @Input() public owner: string; // used for module windows to determine the type of record to add

  @Input('onAdd') public add: Function;
  @Input('onEdit') public edit: Function;
  @Input('onToggle') public toggle: Function;
  @Input('onDelete') public delete: Function;
  @Input('onRefresh') public refresh: Function;

  constructor(private el: ElementRef,
    private cookies: TspCookiesService,
    public core: TspCoreService,
    private object: TspObjectService,
    public date: TspDateService) {
    this.lang = core.lang;
    this.date = date;
  }
}
Run Code Online (Sandbox Code Playgroud)

tsp-field-widget.html

<div *ngIf="type=='company-select'">
  <select class="company-select" 
      class="form-control" 
      [(ngModel)]="fieldData[fieldKey]" 
      (change)="refresh({'id': fieldData[fieldKey]})" 
      data-parsley-trigger="change">
    <option [selected]="x[idKey] === fieldData[fieldKey]" *ngFor="let x of optionData" [ngValue]="x[idKey]">
      {{x[titleKey]}}
    </option>
  </select>
</div>
Run Code Online (Sandbox Code Playgroud)

Sha*_*ice 2

完成修复

tsp-field-widget.component.ts- 将所有@Inputs类型更改Function为@OuputEventEmitters 并初始化为 EventEmitters。将所有on前缀替换为evtason不允许作为 的前缀@Output。添加了四个新方法，事件触发后将调用这些方法。每个新方法都需要为参数分配一个接口args以保持一致性

// Component class
@Component({
  selector: 'tsp-field-widget',
  templateUrl: './templates/tsp-field-widget.html'
})
export class TspFieldWidgetComponent implements OnInit {
  public lang:any; // for i18n

  @Input() public type: string; // the field type
  @Input() public isRequired: boolean; // is the field required
  @Input() public isReadonly: boolean;

  @Input() public index: any; // index of ng-repeat
  @Input() public filterBy: any; // used in conjunction with ng-repeat
  @Input() public orderBy: any; // used in conjunction with ng-repeat
  @Input() public fieldData: any; // the record of ng-repeat
  @Input() public fieldKey: string; // the index of record - record[fieldKey]
  @Input() public placeVal: string; // the placeholder value of the field, usually used for selects and other dropdowns
  @Input() public pattern: string; // used for ng-pattern
  @Input() public prefix: string; // Text to display before title listings

  @Input() public recordId: any; // the ID of the record
  @Input() public label: string; // the label for the field for <label> tag
  @Input() public suffix: string; // sub label, usually placed below some label or title
  @Input() public optionData: any[]; // array of data used to populate selects or to store data values
  @Input() public showAvatar: boolean; // show the fields avatar
  @Input() public hideLabel: boolean; // show the fields <label>
  @Input() public showAdd: boolean; // show the add button (to add new record)
  @Input() public showTitle: boolean; // avatar type: show the name of the user
  @Input() public showDesc: boolean; // avatar type: show the name of the user
  // @Input() public isHighlighted:boolean; // default type: highlight text
  @Input() public numRows: string; // textarea: the number of rows of the text area
  @Input() public idKey: string; // select: the default ID key for option data - defaults to _id
  @Input() public titleKey: string; // select: the default title key for option data - defaults to title
  @Input() public descKey: string; // select: the default description key for option data - defaults to description

  @Input() public sliderType: string; // percent, amount or default, slider type
  @Input() public sliderMinValue: string; // slider type
  @Input() public sliderMaxValue: string; // slider type
  @Input() public sliderStepValue: string; // slider type
  @Input() public sliderOrientation: string; // slider type

  @Input() public dzOptions: any; // dropzone options
  @Input() public dzCallbacks: any; // dropzone callbacks
  @Input() public dzMethods: any; // dropzone methods

  @Input() public decimalPlaces: string; // tspFormat type

  @Input() public locale: string; // for dates and currency
  @Input() public format: string; // for dates
  @Input() public formatHours: string; // for dates
  @Input() public intervalMins: number; // for dates
  @Input() public owner: string; // used for module windows to determine the type of record to add

  @Output() public evtAdd = new EventEmitter();
  @Output() public evtEdit = new EventEmitter();
  @Output() public evtToggle = new EventEmitter();
  @Output() public evtDelete = new EventEmitter();
  @Output() public evtRefresh = new EventEmitter();

  constructor(private el: ElementRef,
    private cookies: TspCookiesService,
    public core: TspCoreService,
    private object: TspObjectService,
    public date: TspDateService) {
    this.lang = core.lang;
    this.date = date;
  }
  add(args: IAdd){
    this.evtAdd.emit(args);
  }
  edit(args: IEdit){
    this.evtEdit.emit(args);
  }
  toggle(args: IToggle){
    this.evtToggle.emit(args);
  }
  delete(args: IDelete){
    this.evtDelete.emit(args);
  }
  refresh(args: IRefresh){
    this.evtRefresh.emit(args);
  }
}
Run Code Online (Sandbox Code Playgroud)

tsp-field-widget.html- 无需更改

tsp-header.component.ts- 更新为传入包含函数所需值的对象。

public onCompanyChange(args: IRefresh):void {
    if (args !== undefined){
        if (args.id !== undefined && args.id !== null)
        {
            if ((__env.debug && __env.verbose)) {
                console.log('Setting current_company_id to ' + args.id);
            }

            // @TODO: Update user preference on server IF they have permission to change their default company
            this.cookies.set('preferences.current_company_id', args.id);
            this.core.app.current_user.preferences.current_company_id = args.id;
            this.core.initApp();

            this.router.navigate(['/app/dashboard']);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

tsp-header.html- 将onRefresh属性重命名为evtRefresh. 为了防止无限循环，我用evtRefresh括号而不是方括号包裹属性，以表示该属性是事件而不是对象。此外，函数参数始终必须是$event。

public onCompanyChange(args: IRefresh):void {
    if (args !== undefined){
        if (args.id !== undefined && args.id !== null)
        {
            if ((__env.debug && __env.verbose)) {
                console.log('Setting current_company_id to ' + args.id);
            }

            // @TODO: Update user preference on server IF they have permission to change their default company
            this.cookies.set('preferences.current_company_id', args.id);
            this.core.app.current_user.preferences.current_company_id = args.id;
            this.core.initApp();

            this.router.navigate(['/app/dashboard']);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

568 次

最近记录：

7 年，7 月 前
相关归档
Angular 2 setinterval()继续在其他组件上运行 38
Javascript 左侧的可选链接 17
如何在Typescript中创建一个空字符串数组？ 14
我们如何使用typescript创建自定义jquery插件？ 11
错误TS2300:重复标识符'RequestInfo' 10
如何链接rxjs可观察 7
在不同模块中扩大 TypeScript 中的标记/歧视联合？ 7
Angular 4延迟加载参数 7
模拟 BsModalRef 进行单元测试 7
如何自动删除 TypeORM 中的孤立行？ 7
难疑归档
如何在Java中将String转换为int？ 2882
如何在JavaScript中将字符串转换为布尔值？ 2328
如何基于通配符匹配以递归方式查找当前和子文件夹中的所有文件？ 1695
如何确定Python变量的类型？ 1437
如何为"选择"框创建占位符？ 1426
获取JavaScript数组中的所有唯一值(删除重复项) 1273
迭代集合,在循环中删除对象时避免使用ConcurrentModificationException 1158
什么是(功能)反应式编程？ 1149
为PHP密码保护哈希和盐 1142
有效地使用Git和Dropbox？ 1117