Как я могу передавать и получать данные в / из модальности ngx-bootstrap? - PullRequest
Новая
       102

Как я могу передавать и получать данные в / из модальности ngx-bootstrap?

0 голосов
/ 07 мая 2018

Передача данных в модальный режим может быть выполнена с помощью initialState , но как я могу получить данные обратно?Например, если я хочу создать диалоговое окно подтверждения?

1 Ответ

0 голосов
/ 07 мая 2018

Несмотря на то, что в настоящее время нет встроенного способа сделать это, это можно сделать путем привязки к событиям onHide / onHidden.

Идея состоит в том, чтобы создать Observer, который будет подписываться на событие 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);
        });
}

Вы можете получить полный код и увидеть, как он работает в этой демоверсии .

...