收听index.html中的服务属性

Question

每次重载时，我都会从数据库中获取数据。为了防止用户在未加载数据的情况下看到应用，我做出了承诺。

我想要的是在动画被解析之前立即执行的动画-我的方法是在AppInitService内更改属性，然后尽快执行。是的，应执行角度浏览器动画。

动画在<app-root>...</app-root>内的index.html中进行，因为其内容显示在应用程序初始化中。 如何监听（订阅）index.html中的AppInitService属性？是否有分配给.index的.ts文件？

有其他方法吗？

AppInitService：

Init(): Promise<any> {
return new Promise((resolve) => {
  this.db.collection('entries').valueChanges()
    .subscribe(val => {
      this.casesService.data = val;
      resolve(true);
    });
});}

app.module.ts：

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => {
    return appInitService.Init();
  };
}

providers: [
   AppInitService,
   { provide: APP_INITIALIZER, useFactory: initializeApp1, deps: [AppInitService], multi: true }
],

Answer 1

我为我的网站创建了一个动画徽标，该徽标在启动Angular应用程序之前显示。该徽标将一直保留到激活路由器出口为止，但是您可以将任何逻辑用作所需的触发器。

您可以通过访问网站查看徽标（无耻的自我促销）

https://reactgular.com/

您可能必须刷新页面才能看到它。它出现的时间很短。

应用程序组件在此处删除徽标：

https://github.com/reactgular/website/blob/ebd39dda032eb2bb77b9f6ae77354445a6c90cfa/src/app/main/body/body.component.ts#L54

index.html页在此处显示徽标：

https://github.com/reactgular/website/blob/ebd39dda032eb2bb77b9f6ae77354445a6c90cfa/src/index.html#L75

将徽标添加到Angular Bootstrap组件内部很重要，不。 Angular启动时将立即删除徽标，但是您希望将其延迟。因此，您需要将其显示在Angular之外，并且以后必须手动将其删除。

这是index.html文件的副本，可以重复使用。欢迎使用HTML，但请使用其他徽标。

https://github.com/reactgular/media/blob/master/src/index.html

Answer 2

如果要在加载应用程序时执行动画，只需在index.html的头部写上自己的styles。您应该在<app-root>Loading....</app-root>之间编写动画HTML，因为一旦内容准备就绪并被渲染，它将被替换。

另一方面，如果您想在应用程序中包含某种类型的加载器，则应制作“加载器组件”，并具有“显示/隐藏”该加载器的服务。