Question

TLDR; 我的index.html中有一个“spinner”HTML元素，我想在@ angular / router resolve（）解析之前显示它，如何实现？

更多详情：

当不使用路由器和解析时，我可以实现我期望的这样做：

的index.html ：

<html>
<head>...</head>
<body>
  <app-base>
    <div class="spinner">Loading...</div>
  </app-base>
</body>

这里发生了什么：在Angular2应用程序引导之前显示一个微调器，并替换<app-base>的内容。一切都有效。

使用@ angular / router ：
的的index.html ：

<html>
<head>...</head>
<body>
  <app-base>
    <div class="spinner">Loading...</div>
  </app-base>
</body>

app.component.ts :(代码与suggested here完全相同，设置this.loading）

@Component({
  selector: 'app-base',
  template: `
    <div class="spinner" *ngIf="loading">Loading...</div>
    <router-outlet></router-outlet>
  `,
})

routing.ts ：

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    resolve: { package: HomeResolver }
  },
];

这里发生了什么：直到Angular2 bootstrap显示一个微调器，然后它被一个类似的微调器替换，由Angular DOM管理（但重新启动旋转动画，因为DOM被修改），然后HomeComponent开始当HomeResolver被解决时。

这是次要的体验，因为微调器在应用程序引导程序时重置，但在路由解析完成之前。

使用Angular2路由器的一致加载屏幕resolve（）s

0 个答案: