在 Angular 中承诺 3 秒后重新加载页面

Posted 2023-02-22

【中文标题】在 Angular 中承诺 3 秒后重新加载页面

【英文标题】：Reload page after 3 seconds with a promise in Angular

【发布时间】：2020-10-25 06:16:44

【问题描述】：

我正在尝试为登录页面实施解决方案。当用户传递错误的登录名/密码时，我希望页面在 3 秒后重新加载。我试图用 2 个解决方案来做到这一点，但无法让它发挥作用。当凭据(else condition) 不匹配时，代码将在单击按钮后启动：

第一个想法：

  ...else
    this.comUser = 'WRONG LOGIN OR PASSWORD'
    this.alert = ""
    setTimeout(function()  
      window.location = "I would like it to use the routing to a component instead of URL here"; 
      ,3000);

承诺的第二个想法：

const reloadDelay = () => 
  reload = this.router.navigate(['/login']);
  return new Promise((resolve, reject) => 
    setTimeout(() => 
    console.log("działa");
    resolve(reload)
    , 4000);
  );
;

感谢任何提示！

【问题讨论】：

在过去的美好时光里，我们会使用简单的Meta Refresh

【参考方案1】：

如果你使用 Angular 9，你可以试试这个

setTimeout(() => this.domDocument.location.reload(), 3000); 

你需要导入：

import  Inject  from '@angular/core';
import  DOCUMENT  from '@angular/common';

为了使用上述方法，将component.ts的构造函数配置如下。

constructor(@Inject(DOCUMENT) private domDocument: Document)

【讨论】：

谢谢 - 看起来合乎逻辑，但我收到一个错误：src/app/login/login.component.ts:16:16 中的错误 - 错误 TS2304：找不到名称“注入”。 16 构造函数(@Inject(DOCUMENT) 私有文档：Document，私有路由器：Router，私有timeoutService：TimeoutService，私有connectionService：ConnectionService) ~~~~~~

请更新@angular/core 导入并包含Inject。 import Component, OnInit, Inject from "@angular/core"; 抱歉我忘了提。

它完全按计划工作 - 非常感谢！ :)

【参考方案2】：

现在可以使用路由器配置的 onSameUrlNavigation 属性来完成。在您的路由器配置中启用 onSameUrlNavigation 选项，将其设置为 reload 。当您尝试导航到已激活的路由时，这会导致路由器触发事件​​循环。

@ngModule(
 imports: [RouterModule.forRoot(routes, onSameUrlNavigation: 'reload')],
 exports: [RouterModule],
 )

在您的路由定义中，将runGuardsAndResolvers 设置为始终。这将告诉路由器始终启动守卫和解析器循环，触发相关事件。

export const routes: Routes = [
 
   path: 'invites',
   component: InviteComponent,
   children: [
     
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     ,
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 
]

最后，在您希望启用重新加载的每个组件中，您需要处理事件。这可以通过导入路由器、绑定到事件并调用初始化方法来重置组件的状态并在需要时重新获取数据来完成。

export class InviteComponent implements OnInit, OnDestroy 
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) 
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => 
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) 
       this.initialiseInvites();
     
   );
 

 initialiseInvites() 
   // Set default values and re-fetch any data you need.
 

 ngOnDestroy() 
   if (this.navigationSubscription) 
     this.navigationSubscription.unsubscribe();
   
 

完成所有这些步骤后，您应该启用路由重新加载。现在，对于您的时间段，您可以简单地在 route.navigate 上使用 settimeout，这应该会在所需时间后重新加载它。

【讨论】：

感谢您的精彩解释 - 我一定会尝试的，但您能否解释一下如何在 route.navigate 上准确设置此超时？我正在与此作斗争:) 提前致谢！