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

【问题标题】：One of the view reloads the whole application其中一个视图重新加载整个应用程序
【发布时间】：2019-08-03 19:27:33
【问题描述】：

单击其中一个字母会重新加载整个应用程序（参见 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 之一并消失，因为应用程序重新启动并返回 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

【问题讨论】：

我曾经设法让路由在 Angular 中工作而无需重新加载应用程序或从服务器获取 404 的唯一方法是将所有路由放在 # 之后。我不认为这应该是必要的，但我还没有弄清楚如何让它工作。
ionic 4.7 在 stackblitz 上的新版本，我会尽快提供工作示例，您可以触摸代码github.com/ionic-team/ionic/issues/16354#issuecomment-515100104
已添加letter.page.html
@khashashin，我想是因为showSelectedLetterPopup函数..你能不能让我们看看这个函数里面有什么？
尝试启用路由器跟踪，也许你会在控制台中找到一些东西

标签： angular ionic-framework ionic4

【解决方案1】：

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

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

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

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

【讨论】：