ionic-framework - 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' },
];
解决方案
菜鸟失误。我正在发布一个答案,以防其他人偶然发现这一点。
我的问题是锚标签。显然我不熟悉角度路由器。看起来如果您提供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>
推荐阅读
- transformation - 如何转换振荡数据
- javascript - 使用属性参考进行变更检测
- flutter - 如何为每个设备找到正确的纵横比?
- python - 由于新版本未能通过我的 Docker 构建,我在哪里可以获得此软件包的旧版本?
- rest - 跟踪打开选项卡的 Microsoft Teams 用户 ID(由机器人创建)
- python - 使用 txt 文件输出将 5 个电子表格中的数据插入 sql
- java - Spring Cloud Data Flow 的自定义任务中缺少参数
- html - 在 Bootstrap 4 中向卡片添加自定义 CSS
- java - 从 WebHDFS Rest API 读取的 ORC 文件
- python - 我们可以在 python 中为每个创建一个吗