在 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()
}
}
})
}
}
显然,我宁愿从使用我的服务的组件中传递标题、消息等,但我只是不确定如何编写服务以允许按照我想要的方式完成使用。
最佳答案
如果我理解正确的话,那么您正在寻找 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);
}
}
关于javascript - 在 Typescript 中的类方法中创建方法 - Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37219366/