node.js - Angular - 如何创建加载屏幕 'like gmail'

标签 node.js angular

在我的 Angular 应用程序中,我让加载旋转器在整个应用程序中工作。使用 NavigationStart 和 NavigationEnd 条件。

但我希望有一个微调器,只要有人刷新页面,即在加载任何组件之前,它就会出现。这样,通过显示微调器,可以向首次加载页面的用户表明应用程序正在加载。

我在前端使用 Angular 6,在后端使用 Node js。

有没有办法在页面加载后启用微调器并禁用它。

不可能将加载器放入任何组件中,因为此时组件本身尚未呈现。? (正如你所想象的!)

是否需要将微调器放在index.html中,或者是否有方法检查条件以了解码件是否完全渲染?

因为对于互联网连接速度非常慢的用户来说,即使在加载登录页面之前,页面看起来也像是死了一样。

我已在登录组件中添加了代码,并希望微调器能够正常工作。

但是在登录组件初始化之前,微调器不会显示。

最佳答案

在应用程序根组件的index.html中,我编写了“正在加载...”,如下所示。

<body>
    <app-root>
       Loadingg.......
    </app-root>
</body>

每当应用程序及其子组件呈现时,此正在加载...就会自动被 Angular 覆盖。我假设所有组件都将仅渲染。 (如果您想将 Loading.. 添加到任何单个组件,您可以像下面的代码一样编写)。

<app-your-wish-component>
     Loadingg....
<app-your-wish-component> // Until and less this component is not rendered **Loading...** will be displayed after that component loads **Loading...** will automatically gone.

关于node.js - Angular - 如何创建加载屏幕 'like gmail',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55692029/

相关文章:

javascript - 使用 NodeJS 填写表格并访问网页

javascript - 使用 Node 和 React 进行基本文件上传

css - Angular 2 样式在开发工具中未按我的意愿显示

angular - 在angular2中读取xml文件数据

javascript - 将 cryto.generateKeyPair 与 jsonwebtoken 一起使用

node.js - Sequelize 错误 : cannot find property "startYear" of undefined

node.js - 带有 socket.io 和 expressjs 的 Node 集群

javascript - 类型 'checked' 上不存在属性 'TElement'

angular - 如何在显示 patchValue 操作记录时获取 Angular 中 FormArray 内 Control 的值

javascript - Angular,使用express和mySql向客户端显示数据