当页面在 Angular 10 中完全加载时调用组件函数

Posted 2023-02-22

【中文标题】当页面在 Angular 10 中完全加载时调用组件函数

【英文标题】：Call a component function when page completely load in Angular 10

【发布时间】：2020-12-23 23:51:23

【问题描述】：

我有一个 Angular 10 应用程序，它首先启动登录页面。但在显示登录字段之前，我需要检查 Web 服务的存在并检查应用程序当前是否处于维护状态。所以我需要在我的login.component.ts 文件中调用一个函数，但是当页面的所有内容将被加载并显示时。

我试过了：

 this.router.events.subscribe((e) => 
   if (e instanceof NavigationEnd) 
      this.NetworkTest();
   
 );

在我的构造函数中，但是调用有点太早了，我的主背景图像没有显示。 对我有什么建议吗？

我也尝试了 ngAfterViewInit，结果相同。

谢谢

UDATE1： 在 NavigationEnd 事件中绑定不起作用是正常的吗？属性在背景中发生变化，但视图没有更新。

【问题讨论】：

唯一的问题是背景图片没有完全加载..？

也许将主背景图片放在 index.html 中，并确保您的 login.component 没有会遮挡主图片任何部分的背景。

不，一些用 ngif 隐藏的 DIV 还没有隐藏

【参考方案1】：

ngAfterViewInit 似乎是满足您需求的好地方。 为确保显示背景，您可以关注this。

为了处理显示登录表单，我建议创建一个标志。仅当 Web 服务正在运行时才将其设置为 true。 技术支持：let isWebServiceRunning = false; HTML：<div *ngIf="isWebServiceRunning">Login Form</div>