首页 > 解决方案 > Ionic 4:离子服务在每个页面上重新加载应用程序

问题描述

我是 Ionic 4 的新手,我想弄清楚我是否做错了什么,或者 Ionic 4 在这方面的行为是否不同。我有一个非常简单的应用程序,它只有几个 Ionic 页面,并且在文件中我在调用app.component.ts中触发了一些初始化逻辑。platform.ready()我注意到在通过ionic serve. 一些代码如下。我假设ionic serve应该只在代码更改时重新加载应用程序(而不是在每次导航到新页面时)?也许我的导航方法导致应用重新加载?

app.component.ts

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(async () => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      let time = new Date().toLocaleString();
      console.log(`${time}: Platform is ready...dude`);
    });
  }

加载各种空页面的简单导航(并且似乎在每个导航上触发应用程序重新加载)。

主页.page.html

<ion-content padding>
<h1>Home Page</h1>
  <ul>
    <li><a href="/home" routerDirection="root">HOME</a></li>
    <li><a href="/login" routerDirection="root">login</a></li>
    <li><a href="/profile" routerDirection="root">profile</a></li>
    <li><a href="/signup" routerDirection="root">signup</a></li>
    <li><a href="/account" routerDirection="forward">accounts</a></li>    
    <li><a href="/admin" routerDirection="forward">admin</a></li>
  </ul>
</ion-content>

应用程序路由.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
  { path: 'account-detail/:id', loadChildren: './pages/account-detail/account-detail.module#AccountDetailPageModule' },
  { path: 'account', loadChildren: './pages/account/account.module#AccountPageModule' },
  { path: 'settlement', loadChildren: './pages/settlement/settlement.module#SettlementPageModule' },
  { path: 'signup', loadChildren: './pages/signup/signup.module#SignupPageModule' },
  { path: 'admin', loadChildren: './pages/admin/admin.module#AdminPageModule' },
];

标签: ionic-frameworkionic4

解决方案


菜鸟失误。我正在发布一个答案,以防其他人偶然发现这一点。

我的问题是锚标签。显然我不熟悉角度路由器。看起来如果您提供routerLink它,它将执行我们对“正常”SPA 链接的期望(而不是重新加载应用程序)。

更新主页

<ion-content padding>
<h1>Home Page</h1>
  <ul>
    <li><a [routerLink]="['/home']" routerDirection="root">HOME</a></li>
    <li><a [routerLink]="['/login']" routerDirection="root">login</a></li>
    <li><a [routerLink]="['/profile']" routerDirection="root">profile</a></li>
    <li><a [routerLink]="['/signup']" routerDirection="root">signup</a></li>
    <li><a [routerLink]="['/account']" routerDirection="forward">accounts</a></li>    
    <li><a [routerLink]="['/admin']" routerDirection="forward">admin</a></li>
  </ul>
</ion-content>

推荐阅读