其中一个视图重新加载整个应用程序

Question

单击其中一个字母会重新加载整个应用程序（参见 gif）。这种行为会导致其他问题，例如rxjs angular BehaviorSubject 重新启动初始值，这也违反了应用程序的整个逻辑。

这个组件的路由定义如下：

const routes: Routes = [
    {
        path: '',
        component: DictionaryPage
    },
    {
        path: 'letter/:letter',
        component: LetterPage
    },
    {
        path: 'add',
        component: WordAddComponent
    },
    {
        path: 'word-detail/:id',
        component: WordDetailComponent
    }
];

并且此组件是字典模块组件之一：

只有该组件的行为会重启整个应用程序，而加载其他组件时不会重启应用程序。例如，下面屏幕截图中的第 4 个选项卡依赖于 BehaviorSubject 之一并消失，因为应用程序重新启动和 returns BehaviorSubject 的原始值。

字典模块将通过ionic tabs路由模块加载：

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'admin',
                children: [
                    {
                        path: '',
                        loadChildren: '../admin/admin.module#AdminPageModule'
                    }
                ]
            },
            {
                path: 'home',
                children: [
                    {
                        path: '',
                        loadChildren: '../home/home.module#HomePageModule'
                    }
                ]
            },
            {
                path: 'profile',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: '../profile/profile.module#ProfilePageModule'
                    }
                ]
            },
            {
                path: 'dictionary',
                children: [
                    {
                        path: '',
                        loadChildren:
                            '../dictionary/dictionary.module#DictionaryPageModule'
                    }
                ]
            },
            {
                path: '',
                redirectTo: '/tabs/home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
    }
];

我创建了具有相同行为的 stackblitz 项目。它有很多错误，但可以重现主要问题。如果你点击字母应用程序将重新加载，请大家检查一下
https://stackblitz.com/edit/ionic-v4-angular-tabs-uev2gt

Answer 1

您的 Stackblitz 根本不起作用，因此如果您提供演示，请确保它是 Minimal, Reproducible Example。无论如何，只要看看 dictionary-page.html 我就发现了问题。就是这一行：

<ion-card href="/tabs/dictionary/letter/{{letter}}">

您正在使用 href，这会重新加载页面。当你想插入一个 link 时，你应该养成使用 angular 的 routerLink 的习惯，以避免这个特定的问题。因此，将您的代码更改为：

<ion-card routerLink="/tabs/dictionary/letter/{{letter}}">

其中一个视图重新加载整个应用程序

One of the view reloads the whole application

ionic-framework

angular

ionic4