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

Question

我正在尝试为登录页面实施解决方案。当用户传递错误的登录名/密码时，我希望页面在 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

如果你使用 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){}

Answer 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，这应该会在所需时间后重新加载它。