ион-роутер тост на маршруте - PullRequest
Новая
       52

ион-роутер тост на маршруте

0 голосов
/ 30 октября 2019

Я использую базовое приложение трафарета, интегрированное с Redux и все вместе с конденсатором. Я хотел бы представить тост, когда произошла ошибка. Мой app-root.tsx выглядит следующим образом: 

    @State() error: any;

    componentWillLoad() {
        this.store.setStore(configureStore({}));

        this.store.mapStateToProps(this, (state: RootState) => {
            const { error, isStatusBarLight } = state.app;
            return { error, isStatusBarLight };
        });
    }

    @Watch('isStatusBarLight')
    onIsStatusBarLightChange() {
        return this.setStatusBarStyle();
    }

    async setStatusBarStyle() {
        try {
            await StatusBar.setStyle({
                style: this.isStatusBarLight ? StatusBarStyle.Dark : StatusBarStyle.Light,
            });
        } catch (err) {
            this.error = err.toString();
        }
    }

    @Watch('error')
    onErrorChange(err: string) {
        if (err) {
            this.toast.message = err;
            this.toast.duration = 2000;
            return this.toast.present();
        }
        return Promise.resolve();
    }

    render() {
        return (
            <ion-app>
                <ion-router useHash={false}>
                    <ion-route url='/' component='app-home' />
                    <ion-route url='/settings' component='app-settings' />
                </ion-router>
                <ion-nav />
                <ion-toast message='' duration={2000} ref={elm => this.toast = elm}></ion-toast>
            </ion-app>
        );
    }

Он работает плавно, когда отображается app-root. Но когда isStatusBarLight изменяется в app-settings, этот app-root компонент получает событие через mapStateToProps, но не показывает тост. Также я получаю журнал консоли:

Событие "ionToastWillPresent" было отправлено, но узел диспетчера больше не подключен к домену.

Я также пыталсядобавлять и удалять тосты в функции рендеринга, в зависимости от того, есть ли ошибка или нет, но это приводит к ошибке, если тост удаляется до его автоматического скрытия (т. е. из-за изменения состояния). Затем он перестает показывать тосты в представлении детей. Также я не уверен, является ли это оптимальным способом: 

render() {
    return (
        <ion-app>
            <ion-router useHash={false}>
                <ion-route url='/' component='app-home' />
                <ion-route url='/settings' component='app-settings' />
            </ion-router>
            <ion-nav />
            {this.error ? <ion-toast message={this.error} duration={2000} ref={elm => elm.present()}></ion-toast> : null}
        </ion-app>
    );
}

Я не ищу обходного пути, я ищу способ представить модалы и тосты во всем приложении, имея унифицированнуюспособ представить этот вид сообщений пользователю через состояние приложения. Пожалуйста, кто-нибудь может мне помочь в этом?

1 Ответ

0 голосов
/ 30 октября 2019

Сейчас я решил, что каждый раз создаю новый тост: 

@Element() me: HTMLElement;

@Watch('error')
onErrorChange(err: string) {
    if (err) {
        const toast: HTMLIonToastElement = document.createElement('ion-toast');
        toast.message = err;
        toast.duration = 2000;
        toast.onDidDismiss().then(() => toast.remove());
        this.me.appendChild(toast);

        return toast.present();
    }
    return Promise.resolve();
}

render() {
    return (
        <ion-app>
            <ion-router useHash={false}>
                <ion-route url='/' component='app-home' />
                <ion-route url='/settings' component='app-settings' />
            </ion-router>
            <ion-nav />
        </ion-app>
    );
}
...