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

Question

我对Angular 2相当陌生。我正在从AngularJS升级我的应用程序，现在我正处于UI/UX开发的完成阶段。我还有最后一个问题需要帮助。提前谢谢你。

当前计划

1. 我有一个自定义指令TspFieldWidgetDirective，它接受多个输入，其中一个是函数@Input('onRefresh') public refresh: Function;。
2. TspFieldWidgetDirective元素可以在各种组件中使用，以重新设计标准表单字段。
3. 我正在使用当前指令作为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']);
}
}

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>

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;
}
}

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>

Answer 1

Angular 的变化检测在视图初始化期间已经触发。但此时 refresh(( 可能仍为空/未定义。

我建议不要直接调用"refresh(("，而是一个可以检查 refresh(( 是否已传入的包装方法。

在你的tsp-field-widget.html中像这样的东西：

(change)="doRefresh({'id': fieldData[fieldKey]})"

这在你的tsp-field-widget.component.ts中

private doRefresh(object: any): void {
if(refresh) {
refresh(object);
}
}

这样，您可以确保仅在刷新已存在时才调用刷新。

Answer 2

完整修复

tsp-field-widget.component.ts- 将类型Function的所有@Inputs更改为@Ouput并初始化为事件发射器。将所有on前缀替换为evt因为不允许on作为@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);
}
}

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']);
}
}
}

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

<!-- company changer -->
<li>
<tsp-field-widget 
type="company-select" 
(evtRefresh)="onCompanyChange($event)" 
[showAvatar]="true"
[fieldData]="core.app.current_user.preferences"
fieldKey="current_company_id" 
[hideLabel]="true"
[optionData]="core.app.session.base_companies">
</tsp-field-widget>
</li>