ionic4之lazyloading加载页面异常的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/moxiaomomo/article/details/86574194

不使用lazyloading的情况下, 页面是可以正常加载显示的。
加了嵌套的lazyloading后，页面反而变空白了。
查看具体html具体元素后，发现多了一个样式空白的ng-component:

加载异常的页面代码是这么定义的:

home.page.html

<ion-content class="home-content">
  <!-- 具体的组件元素 -->
</ion-content>

home.page.scss

.home-content {
  width: 100%;
  height: 100%;
  background-color: #666 !important;
}

修改home.page.html, 重新引入ion-page样式后又能正常显示:

<ion-content class="home-content ion-page">
  <!-- 具体的组件元素 -->
</ion-content>

看起来是lazyloading在某些情况下引起了bug, 尚未找到官方或更优的解决方法。

---

发现另外一种解决方法，可以在home.page.scss中增加：

ion-content {
  height: 100vh !important;
}