解析整个应用程序 Angular 2

Question

我有一个应用程序，它有一个带有页眉和页脚的简单主模板，就像这样

<section style="margin-bottom:70px">
   <nav-menu></nav-menu>
</section>
<section>
   <router-outlet></router-outlet>
</section>
<section>
   <foot></foot>
</section>

路由器插座上有解析器来阻止 UI 痛苦，直到 Api 调用完成。这导致 UI 只有页眉和页脚可见，直到 Api 返回。有没有办法解决其他组件？也许像其他组件订阅的共享服务？

Answer 1

有几种方法可以解决这个问题：

1) 您可以使用解析器设置的 loaded 或类似标志构建服务。然后在其他组件上添加一个 *ngIf 以防止它们在设置 loaded 标志之前显示。

2) 构建一个带有单个路由器插座的临时组件。将您当前拥有的代码移动到该临时路由器插座的子路由中。然后你可以在那个子路由上设置解析器。

app.component.html

<router-outlet></router-outlet>

main.component.html

<section style="margin-bottom:70px">
   <nav-menu></nav-menu>
</section>
<section>
   <router-outlet></router-outlet>
</section>
<section>
   <foot></foot>
</section>

路由配置将定义到主要组件的路由，并且会有路由解析器。您当前的路线将是这条路线的子路线。

解析整个应用程序 Angular 2

Resolve Entire Application Angular 2

angular-routing

angular