路线上的离子路由器吐司答案

【问题标题】：ion-router toast on route路线上的离子路由器吐司
【发布时间】：2020-02-25 18:16:36
【问题描述】：

我正在使用与 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 接收事件但不显示toast。我还收到一个控制台日志：

“ionToastWillPresent”事件已发出，但调度程序节点不再连接到dom。

我也尝试在渲染函数中添加和删除 toast，这取决于是否有错误，但是如果在自动隐藏之前删除 toast（即因为状态更改），这会导致错误.然后它停止在子视图中显示 toast。另外我不确定这是否是最佳方式：

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

我不是在寻找解决方法，而是在寻找一种在整个应用程序中呈现模态和 toast 的方法，以一种统一的方式通过应用程序状态向用户呈现此类消息。请问，谁能帮我解决这个问题？

【问题讨论】：

标签： typescript ionic-framework stenciljs capacitor

【解决方案1】：

现在我已经通过每次创建一个新的 toast 来解决：

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

【讨论】：