从 SERVICE 执行 COMPONENT 方法 [英] Executing COMPONENT method from SERVICE
问题描述
我正在尝试从 Service 方法 执行组件 method.我看到了其他 2 个线程:
I'm trying to execute a Component method from a Service method. I saw these other 2 threads:
但它们显示了从 构造函数 执行的方法.
But they show a method executed from the constructor.
我在 Ionic 应用程序上使用 Ion-Select 组件(很多选择),为此我使用了一个功能调用操作表,它为从选择中选择的每个选项都有一个回调处理程序.
I'm using on an Ionic app, the Ion-Select component(lot of selects) And for it I'm using a feature call Action Sheet which has a callback handler for every option chosen from the select.
Action 在服务上,因此 Handler 调用.但是每个选择都有自己的方法,需要从 ActionSheet 中调用.这就是我现在的代码:
The Action is on the service, and so the Handler call. But each select has an own method that need to be called from the ActionSheet. Thats my code now:
选择示例
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ActionSheetService } from '../../services/action-sheet.service';
import { Type } from '../../models/general/type.model';
@Component({
selector: 'type-select-component',
templateUrl: 'type-select.component.html',
providers: [ ActionSheetService ]
})
export class TypeSelectComponent {
@Input() public types: Object[];
@Output() public typeId: EventEmitter<number> = new EventEmitter<number>();
public updatedItem: Type = new Type();
private actionTitle: string = "What's Type"
constructor( private actionSheetService: ActionSheetService ) { }
//The Service should execute this method
public updateSelectItem(id:number, type: Type): void{
this.updatedItem = type;
this.typeId.emit(id);
}
public presentActionSheet(): void {
//calling the service method passing options for the action sheet
this.actionSheetService.presentActionSheet(this.actionTitle,this.types as Type[]);
}
}
行动单服务
import { Injectable } from '@angular/core';
import { ActionSheetController } from 'ionic-angular'
@Injectable()
export class ActionSheetService {
constructor(private actionSheetCtrl: ActionSheetController) { }
public presentActionSheet(
actionTitle: string,
items: any[]): void {
let actionSheet = this.actionSheetCtrl.create({
title: actionTitle
});
for (let i = 0; i < items.length; i++) {
actionSheet.addButton({
text: items[i].name,
cssClass: items[i].css,
icon: items[i].selectIcon,
handler: () => {
//Here I should execute the method updateSelectItem from the component
updateSelectItem(i, items[i]);
console.log('Service ActionHandler');
}
});
}
actionSheet.addButton({ text: 'Cancel', 'role': 'cancel' });
actionSheet.present();
}
}
我为什么要这样做???好吧,我可以在每个选择中放置一个操作表......但是它会破坏 DRY
Why am I doing this way??? Well I could put an action sheet in each select...But then it'll break DRY
有帮助吗?
推荐答案
您可以将回调传递给您的服务并将其设置为您的操作表的处理程序.
You can pass a callback to your service and set it as handler for your action sheets.
public presentActionSheet(
actionTitle: string,
items: any[],
callbackHandler:any): void {
let actionSheet = this.actionSheetCtrl.create({
title: actionTitle
});
for (let i = 0; i < items.length; i++) {
actionSheet.addButton({
text: items[i].name,
cssClass: items[i].css,
icon: items[i].selectIcon,
handler: () => {
callbackHandler(i, items[i]);//call the handler passed
console.log('Service ActionHandler');
}
});
}
actionSheet.addButton({ text: 'Cancel', 'role': 'cancel' });
actionSheet.present();
}
在你的组件中
public presentActionSheet(): void {
//calling the service method passing options for the action sheet
this.actionSheetService.presentActionSheet(this.actionTitle,this.types as Type[],this.updateSelectItem.bind(this) );//send your component function. Do not forget to bind the context
}
这篇关于从 SERVICE 执行 COMPONENT 方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!