在延迟加载的模块初始化Angular2之前在路由器插座内加载屏幕

YAS*_*AVE 5 javascript angular2-routing angular

我正在尝试在路由器插座内显示加载屏幕,直到收到数据.

这是我在index.html中的代码

 <root>
  <div class="app-content text-center">
    <div class="app-content-body" >
      <div class="loader_div" >
        <div class="loader"></div>
      </div>
    </div>
  </div>
 </root>
Run Code Online (Sandbox Code Playgroud)

它按预期工作,但当我尝试在内部执行相同的代码时,即使在屏幕加载后,它仍保留在屏幕内.

一种可能的解决方案是我可以订阅路由器事件并使用instanceof NavigationStart和NavigationEnd.并使用ngIf从routeroutlet中删除DOM.

有没有其他更简单的方法来解决这个问题?

编辑1:在路由器事件中订阅后,我意识到这不是明智的决定.因为在多个嵌套路由器插座的情况下它将在整个页面中显示刷新屏幕而不是子路由器插座所在的部分.当我检查DOM时,<ng-component>不会替换<router-outlet>它,而是在完成标记后加载它.(</router-outlet>)是否是Angular2的错误?