可以使用initialState将数据传递给模态,但是我怎样才能接收回数据呢?例如,如果我想创建一个确认对话框?
问问题
8585 次
1 回答
12
尽管目前没有内置的方法可以做到这一点,但可以通过绑定到 onHide/onHidden 事件来完成。
这个想法是创建一个观察者,它将订阅 onHidden 事件并next()
在它接收到数据时触发。
我使用 onHidden 而不是 onHide 所以所有 CSS 动画都在返回结果之前完成。
我还实现了它以MessageService
更好地分离代码。
@Injectable()
export class MessageService {
bsModalRef: BsModalRef;
constructor(
private bsModalService: BsModalService,
) { }
confirm(title: string, message: string, options: string[]): Observable<string> {
const initialState = {
title: title,
message: message,
options: options,
};
this.bsModalRef = this.bsModalService.show(ConfirmDialogComponent, { initialState });
return new Observable<string>(this.getConfirmSubscriber());
}
private getConfirmSubscriber() {
return (observer) => {
const subscription = this.bsModalService.onHidden.subscribe((reason: string) => {
observer.next(this.bsModalRef.content.answer);
observer.complete();
});
return {
unsubscribe() {
subscription.unsubscribe();
}
};
}
}
}
ConfirmDialogComponent 如下所示:
export class ConfirmDialogComponent {
title: string;
message: string;
options: string[];
answer: string = "";
constructor(
public bsModalRef: BsModalRef,
) { }
respond(answer: string) {
this.answer = answer;
this.bsModalRef.hide();
}
}
实现后,使用起来非常简单:
confirm() {
this.messageService
.confirm(
"Confirmation dialog box",
"Are you sure you want to proceed?",
["Yes", "No"])
.subscribe((answer) => {
this.answers.push(answer);
});
}
您可以获取完整代码并在此演示中查看它的运行情况。
于 2018-05-07T04:27:32.020 回答