Angular 从服务执行组件方法

我正试图从服务方法执行组件方法。我看到了另外两条线：

但它们显示了从构造函数执行的方法

我在一个Ionic应用程序上使用了Ionion Select组件（很多选择项），对于它，我使用了一个功能调用操作表，它有一个回调处理程序，用于从选择项中选择的每个选项

操作在服务上，因此处理程序调用。但是每个select都有自己的方法，需要从ActionSheet中调用。这就是我现在的代码：

选择示例

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

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
从“../../services/action sheet.service”导入{ActionSheetService}；
从“../../models/general/Type.model”导入{Type}；
@组成部分({
选择器：“类型选择组件”，
templateUrl:“键入select.component.html”，
提供者：[行动表服务]
})
导出类TypeSelectComponent{
@Input（）公共类型：对象[]；
@Output（）public typeId:EventEmitter=neweventemitter（）；
public updateItem:Type=new Type（）；
private actionTitle:string=“什么是类型”
构造函数（私有actionSheetService:actionSheetService）{}
//服务应该执行这个方法
public updateSelectItem（id:number，type:type）：void{
this.updateItem=类型；
this.typeId.emit（id）；
}
public presentationsheet（）：void{
//调用操作表的服务方法传递选项
this.actionSheetService.presentActionSheet（this.actionTitle，this.types为类型[]）；
}
}

行动单服务

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

从'@angular/core'导入{Injectable}；
从'ionic angular'导入{ActionSheetController}
@可注射（）
导出类ActionSheet服务{
构造函数（私有actionSheetCtrl:ActionSheetController）{}
公开说明书(
actionTitle:string，
项目：任意[]）：无效{
让actionSheet=this.actionSheetCtrl.create({
标题：actionTitle
});
for（设i=0；i{
//在这里，我应该从组件中执行updateSelectItem方法
更新选择项（i，项[i]）；
log（'serviceactionhandler'）；
}
});
}
addButton（{text:'Cancel'，'role'：'Cancel'}）；
actionSheet.present（）；
}
}

我为什么要这样做？ 好吧，我可以在每一个选择中都放上一张行动表……但之后它就会干涸

---

有任何帮助吗？

您可以将回调传递给您的服务，并将其设置为操作表的处理程序

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

---

男人：成功了！但我没有“绑定上下文”不理解这部分。。。应用程序正在与您的修改一起工作。但是我能就这个xD向你解释一下吗

this.updateSelectItem.bind（this）

函数将上下文设置为当前

this

即组件。否则，当它被调用时，

这个

将指向不同的上下文，而

这个.updateItem

将出错man:D它成功了！但我没有“绑定上下文”不理解这部分。。。应用程序正在与您的修改一起工作。但是我能就这个xD向你解释一下吗

this.updateSelectItem.bind（this）

函数将上下文设置为当前

this

即组件。否则，当调用

时，此

将指向不同的上下文，并且

this.updateItem

将出错