如何在Angular 2/4中的视口上延迟加载组件？

Question

我的app-component有很多子组件，并非一次全部进入视口。我不想一次加载所有组件，因为大多数时候用户可能不需要滚动到底部。那么，只有当子组件进入视口/靠近视口时才有延迟加载子组件的方法吗？ 这是我的app-component模板代码：

<!--Header-area-->
<header class="relative header-area" id="home">
  <div class="header-bg header-bg-color">
    <div class="header-bg-image header-bg-image1 home-parallax"></div>
  </div>

  <!--Mainmenu-area-->
  <app-mainmenu></app-mainmenu>
  <!--Mainmenu-area/-->

  <div class="header-scroll-btton smoth">
    <a href="#about"><span class="ti-arrow-down"></span></a>
  </div>

</header>
<!--Header-area/-->

<!--About-area-->
<app-about></app-about>
<!--About-area/-->

<!--Facilities-area-->
<app-facilities></app-facilities>
<!--Facilities-area/-->

<!--Staff-area-->
<app-staff></app-staff>
<!--Staff-area/-->

<!--Administration-area/-->
<app-administration></app-administration>
<!--Administration-area/-->

<!--Gallery-Area-->
<app-gallery></app-gallery> //This is very expensive to load
<!--Gallery-Area/-->

<!--News-Area-->
<app-news></app-news>
<!--News-Area/-->

<!--Contact-Area-->
<app-contact></app-contact>
<!--Contact-Area-->

<!--Footer-area-->
<app-footer></app-footer>
<!--Footer-area/-->