在 Typescript 的 class 方法中创建方法 - Angular 2

Question

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

}

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

Answer 1

我会尝试

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

}

我希望我已经理解你的观点并且这对你有所帮助

Answer 2

如果我的理解正确，那么你正在寻找 the builder pattern。

这是基于您的代码的实现：

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

然后：

new DialogService()
    .title('Some title')
    .message('Some message')
    .okBtn('Sounds Good')
    .cancelBtn('No way!')
    .confirm(() => {})
    .cancel(() => {})
    .show();

编辑

我在发布此编辑后看到您更改的问题，所以我正在重新编辑它：

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 和 alert 方法，但我不确定是什么他们应该做...
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);
    }
}

在 Typescript 的 class 方法中创建方法 - Angular 2

Creating methods within a class method in Typescript - Angular 2

javascript

typescript

angular

angular2-services

编辑