Javascript 在Typescript中的类方法中创建方法-Angular 2

在Angular 2中，我使用bootbox.js创建对话框（警报、确认）。我正在尝试创建一个对话服务，但我不确定如何用Typescript编写代码，以使我能够以我希望的方式使用我的服务方法

我想如何使用我的服务：

export class SomeComponent {

  constructor(private _dialog: DialogService){}

  showConfirm() {
    _dialog.confirm()
      .title('Some title')
      .message('Some message')
      .okBtn('Sounds Good')
      .cancelBtn('No way!')
      .confirm(() => {})
      .cancel(() => {})
  }

showAlert() {
        _dialog.alert()
          .title('Some title')
          .message('Some message')
          .okBtn('Sounds Good')
          .callback(() => {})
      }

export class DialogService {

confirm() {
    bootbox.dialog({
      title: title,
      message: message,
      buttons: {
        cancel: {
          label: cancelBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => cancel()
        },
        okay: {
          label: okBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => confirm()
        }
      }
    })
  }

 alert() {
    bootbox.dialog({
      title: title,
      message: message,
      buttons: {
        okay: {
          label: okBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => callback()
        }
      }
    })
  }

}

我的当前服务：

export class SomeComponent {

  constructor(private _dialog: DialogService){}

  showConfirm() {
    _dialog.confirm()
      .title('Some title')
      .message('Some message')
      .okBtn('Sounds Good')
      .cancelBtn('No way!')
      .confirm(() => {})
      .cancel(() => {})
  }

showAlert() {
        _dialog.alert()
          .title('Some title')
          .message('Some message')
          .okBtn('Sounds Good')
          .callback(() => {})
      }

export class DialogService {

confirm() {
    bootbox.dialog({
      title: title,
      message: message,
      buttons: {
        cancel: {
          label: cancelBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => cancel()
        },
        okay: {
          label: okBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => confirm()
        }
      }
    })
  }

 alert() {
    bootbox.dialog({
      title: title,
      message: message,
      buttons: {
        okay: {
          label: okBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => callback()
        }
      }
    })
  }

}

---

显然，我更愿意从使用我的服务的组件中传递标题、消息等，但我只是不确定如何编写服务，以允许以我希望的方式进行使用。

我会尝试类似的方法

export class DialogService {

public title: string;
public messafe: string;
.....  // all other properties

confirm() {
    bootbox.dialog({
      title: title,
      message: message,
      buttons: {
        cancel: {
          label: cancelBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => cancel()
        },
        okay: {
          label: okBtn,
          className: 'btn-inverse btn-inverse-primary',
          callback: () => confirm()
        }
      }
    })
  }

}

然后，在使用DialogService的组件中

export class SomeComponent {

  constructor(private _dialog: DialogService){}

  this._dialog.title = 'some title';
  this._dialog.message = 'some message';
  // the rest of the stuff

  this._dialog.showConfirm();

}

---

我希望我已经理解了你的观点，这有助于

如果我正确理解了你，那么你正在寻找

以下是基于您的代码的实现：

class DialogService {
    private _title: string;
    private _message: string;
    private _okBtn: string;
    private _cancelBtn: string;
    private _confirm: string;
    private _cancel: string;

    constructor() {}

    public title(value: string): DialogService {
        this._title = value;
        return this;
    }

    public message(value: string): DialogService {
        this._message = value;
        return this;
    }

    public okBtn(value: string): DialogService {
        this._okBtn = value;
        return this;
    }

    public cancelBtn(value: string): DialogService {
        this._cancelBtn = value;
        return this;
    }

    public confirm(value: () => {}): DialogService {
        this._confirm = value;
        return this;
    }

    public cancel(value: () => {}): DialogService {
        this._cancel = value;
        return this;
    }

    public show(): void {
        bootbox.dialog({
            title: this._title,
            message: this._message,
            buttons: {
                cancel: {
                    label: this._cancelBtn,
                    className: 'btn-inverse btn-inverse-primary',
                    callback: this._cancel
                },
                okay: {
                    label: okBtn,
                    className: 'btn-inverse btn-inverse-primary',
                    callback: this._confirm
                }
            }
        });
    }
}

然后：

---

编辑 发布此编辑后，我看到了您更改的问题，因此我正在编辑它：

interface ButtonData {
    label: string;
    className: string;
    callback: () => void;
}

class DialogService {
    private static BUTTON_CLASS_NAME = "btn-inverse btn-inverse-primary";

    private _title: string;
    private _message: string;
    private _okay: ButtonData;
    private _cancel: ButtonData;

    constructor() {}

    public title(value: string): DialogService {
        this._title = value;
        return this;
    }

    public message(value: string): DialogService {
        this._message = value;
        return this;
    }

    public okay(label: string, callback?: () => void): DialogService {
        this._okay = {
            label: label,
            className: DialogService.BUTTON_CLASS_NAME,
            callback: callback || function() {}
        };

        return this;
    }

    public cancel(label: string, callback?: () => void): DialogService {
        this._cancel = {
            label: label,
            className: DialogService.BUTTON_CLASS_NAME,
            callback: callback || function() {}
        };

        return this;
    }

    public alert(): void {
        bootbox.dialog({
            title: this._title,
            message: this._message,
            buttons: {
                okay: this.okay
            }
        });
    }

    public confirm(): void {
        bootbox.dialog({
            title: this._title,
            message: this._message,
            buttons: {
                cancel: this._cancel,
                okay: this.okay
            }
        });
    }
}

旧版编辑

我仍然不确定您到底在寻找什么，我做了一些更改，确保有

确认

和

警报

方法，但我不确定它们应该做什么…

confirm

使用

bootbox.dialog

您的代码有，但我不知道如何使用

alert

所以我发明了

bootbox.alert

功能。
这可能是错误的，您需要自己实现它

interface ButtonData {
    label: string;
    className: string;
    callback: () => void;
}

interface ServiceData {
    title: string;
    message: string;
    buttons: {
        cancel: ButtonData,
        okay: ButtonData
    };
}

class DialogService {
    private static BUTTON_CLASS_NAME = "btn-inverse btn-inverse-primary";
    private data: ServiceData

    constructor() {
        this.data = <ServiceData> {
            buttons: {
                cancel: <ButtonData> {},
                okay: <ButtonData> {}
            }
        };
    }

    public title(value: string): DialogService {
        this.data.title = value;
        return this;
    }

    public message(value: string): DialogService {
        this.data.message = value;
        return this;
    }

    public okay(label: string, callback?: () => void): DialogService {
        this.data.buttons.okay = {
            label: label,
            className: DialogService.BUTTON_CLASS_NAME,
            callback: callback || function() {}
        }

        return this;
    }

    public cancel(label: string, callback?: () => void): DialogService {
        this.data.buttons.cancel = {
            label: label,
            className: DialogService.BUTTON_CLASS_NAME,
            callback: callback || function() {}
        }

        return this;
    }

    public confirm(): void {
        bootbox.dialog(this.data);
    }

    public alert(): void {
        bootbox.alert(this.data);
    }
}

接口按钮数据{
标签：字符串；
类名：string；
回调：（）=>void；
}
接口服务数据{
标题：字符串；
消息：字符串；
按钮：{
取消：Buttonda，
好的，巴顿达
};
}
类对话服务{
专用静态按钮\u CLASS\u NAME=“btn反向btn反向主”；
私有数据：ServiceData
构造函数（）{
此参数。数据={
按钮：{
取消：{}，
好的：{}
}
};
}
公共标题（值：字符串）：DialogService{
this.data.title=值；
归还这个；
}
公共消息（值：字符串）：DialogService{
this.data.message=值；
归还这个；
}
公共OK（标签：字符串，回调？：（）=>void）：DialogService{
this.data.buttons.ok={
标签：标签，
类名：DialogService.BUTTON\u类名，
回调：回调| |函数（）{}
}
归还这个；
}
公共取消（标签：字符串，回调？：（）=>void）：DialogService{
this.data.buttons.cancel={
标签：标签，
类名：DialogService.BUTTON\u类名，
回调：回调| |函数（）{}
}
归还这个；
}
公共确认（）：无效{
bootbox.dialog（this.data）；
}
公共警报（）：无效{
bootbox.alert（this.data）；
}
}

这几乎就是我所想的。不过有两种方法；alert and confirmI并没有计划让我的代码完全适合您，只是给您一个示例，说明如何在您的案例中实现构建器模式。您应该修改它以满足您的确切需求。我不明白如果有两种方法，这将如何工作？我是个笨蛋，我不确定你想做什么。

警报

和

确认

之间有什么区别？在您正在调用的

启动对话框中的
确认
函数中，
警报将执行什么操作？同样，在
确认
函数中的代码中，您在ok按钮回调中调用了相同的函数，它是否意味着是递归的？一个是我要显示警报，另一个是我要显示确认…因此我们将有一个
\u对话框。警报（）
和一个
\u对话框。确认（）
以及它们自己的方法集。我只是为了简单起见才出现在上面。