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

Question

我正在尝试为登录页面实施一个解决方案。当用户传递错误 login/password 时，我希望页面在 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);
  });
};

感谢任何提示！

Answer 1

现在可以使用路由器配置的 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，这应该会在所需时间后重新加载它。

Answer 2

如果您使用的是 angular9，您可以试试这个

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

您需要导入：

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

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

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

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

Reload page after 3 seconds with a promise in Angular

javascript

timeout

reload

promise

angular