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

【问题标题】：Ionic 4: ionic serve reloads app on every pageIonic 4：离子服务在每个页面上重新加载应用程序
【发布时间】：2019-02-26 01:00:36
【问题描述】：

我是 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' },
];

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

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

我的问题是锚标签。显然我不熟悉角度路由器。看起来，如果您提供 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>

【讨论】：