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

}

อย่างชัดเจนว่าฉันคงอยากส่งต่อชื่อเรื่อง ข้อความ เป็นต้น จากคอมโพเนนต์ที่กำลังใช้บริการของฉัน แต่ฉันก็ไม่แน่ใจว่าจะเขียนบริการให้สามารถใช้งานในแบบที่ฉันต้องการได้อย่างไร

คำตอบ #1

ถ้าฉันเข้าใจคุณถูกต้อง คุณกำลังมองหารูปแบบบิลเดอร์อยู่ใช่ไหม

นี่คือตัวอย่างการนำไปใช้งานโดยอ้างอิงจากโค้ดของคุณ:

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

แก้ไขเก่า

ฉันก็ยังไม่แน่ใจว่าคุณกำลังมองหาอะไรอยู่ exactly, ฉันได้เปลี่ยนบางอย่างเล็กน้อยและตรวจสอบให้แน่ใจว่ามี confirm และ alert methods แต่ฉันก็ไม่แน่ใจว่ามันควรจะทำอะไร...
confirm ใช้ bootbox.dialog ที่โค้ดของคุณมี แต่ฉันก็ไม่รู้จะทำยังไงกับ alert เลยสร้างฟังก์ชัน bootbox.alert ขึ้นมา
อาจจะผิดพลาดและคุณอาจต้อง implement เอง...

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

คำตอบ #2

ฉันจะลองทำอะไรบางอย่างแบบ

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

}

ฉันหวังว่าฉันจะเข้าใจความคิดเห็นของคุณและหวังว่าสิ่งนี้จะช่วยได้