Ionic 4：离子服务在每个页面上重新加载应用程序

Question

我是 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`);
    });
  }

加载各种空白页面的简单导航（并且似乎在每次导航时触发应用程序重新加载）。

Home.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>

app-routing.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' },
];

Answer 1

菜鸟错误。我正在发布一个答案，以防其他人无意中遇到这个问题。

我的问题是锚标签。显然我不熟悉 angular 路由器。看起来如果您提供 routerLink 它将执行我们对 "normal" SPA link 的期望（而不是重新加载应用程序）。

已更新主页

<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>

Ionic 4：离子服务在每个页面上重新加载应用程序

Ionic 4: ionic serve reloads app on every page

ionic-framework

ionic4