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

Creating methods within a class method in Typescript - Angular 2

提问by sharpmachine

In Angular 2 I'm using bootbox.js to create dialogs (alerts, confirmations). I'm trying to create a dialog service, but I'm not sure how to write the code in Typescript is such a way that would allow me to use my service methods the way I'm hoping to.

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

How I want to use my service:

我想如何使用我的服务：

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(() => {})
      }

My service as it currently:

我目前的服务：

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

}

Obviously I would rather pass in the title, message, etc. from the component that's using my service, but I'm just not sure how to write the service to allow the usage to be done the way I would to.

显然，我宁愿从使用我的服务的组件传入标题、消息等，但我不确定如何编写服务以允许按照我想要的方式完成使用。

采纳答案by Nitzan Tomer

If I understand you correctly then you're looking for the builder pattern.

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

Here's an implementation based on your code:

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

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

Then:

然后：

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

---

---

Edit

编辑

I saw your changed question after posting this edit, so I'm re-editing it:

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

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

older edit

较旧的编辑

I'm still not sure what exactly you're looking for, I changed things a bit and made sure that there are confirmand alertmethods, but I'm not sure what they are supposed to do...
The confirmuses the bootbox.dialogyour code has, but I had no idea what to do with the alertso I invented the bootbox.alertfunction.
It's probably wrong and you'll need to implement that yourself...

我真不知道你在寻找什么，我改变了一些事情位，并确保有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);
    }
}

回答by Picci

I would try something like

我会尝试类似的东西

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

}

and then, in the component that uses the DialogService

然后，在使用 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();

}

I hope I heve understood your point and that this helps

我希望我已经理解你的观点，这会有所帮助