使用角度服务在多个组件中设置超时

Posted

技术标签:

【中文标题】使用角度服务在多个组件中设置超时【英文标题】:Setting a timeout in multiple components with service in angular 【发布时间】:2020-10-07 14:30:46 【问题描述】:

我正在尝试使用角度服务在一组组件中设置超时。我试图按照我在网上找到的材料进行操作,但我有点卡住了。我已经创建了 timeout.service.ts 文件并将代码放在那里,但出现了多个错误。我需要帮助才能做到这一点。超时在组件本身中工作正常,但我想根据 DRY 方法工作。感谢您对解决此问题的支持!

堆栈闪电战:https://stackblitz.com/edit/flight-date-picker-with-service

组件.TS:

    import  Component, OnInit  from '@angular/core';7
    import  Router, RouterLink  from '@angular/router';
    import  HostListener  from '@angular/core'
    import  TimeoutService  from '../timeout.service';
    
    @Component(
      selector: 'app-chooseflight',
      templateUrl: './chooseflight.component.html',
      styleUrls: ['./chooseflight.component.scss'],
      providers: [TimeoutService]
    )
    export class ChooseflightComponent implements OnInit 
      constructor(private router: Router, timeoutService: TimeoutService) 
        this.showStorage = localStorage.getItem("flightdetails") || ;
      
    
    
      ngOnInit() 
        this.resetTimer();
      
      // public time: any;

      // @HostListener('document:mousemove')
      // @HostListener('document:keypress')
      // @HostListener('document:click')
      // @HostListener('document:wheel')
      // resetTimer() 
      //   clearTimeout(this.time);
      //   this.time = setTimeout(() => 
      //   localStorage.removeItem("flightdetails");
      //   console.log("Local storage will now be deleted");
      //   this.router.navigate(["/chooseflight"]);
      //   , 180000);
      // 

注释部分已移至服务文件:

    export class TimeoutService 
      public time: number;
      
      console.log("TimeoutService Działa!");
      @HostListener('document:mousemove')
      @HostListener('document:keypress')
      @HostListener('document:click')
      @HostListener('document:wheel')
      resetTimer() 
        clearTimeout(this.time);
        this.time = setTimeout(() => 
        localStorage.removeItem("flightdetails");
        console.log("Local storage will now be deleted");
        this.router.navigate(["/chooseflight"]);
        , 180000);
      
    

【问题讨论】:

【参考方案1】:

你在正确的轨道上。但是,当您将代码复制到服务时,您错过了几个重要步骤:

    在服务中导入您需要的所有内容,并像在组件中一样使用构造函数 在app.module 中将服务设置为提供者

1 在服务中导入您需要的所有内容,并像在组件中一样使用构造函数

在服务中,您只有 @HostListener 没有正确的导入。在 service.ts 文件的顶部,我添加了以下内容:

import  Router  from "@angular/router";
import  HostListener, Injectable from "@angular/core";


@Injectable(
  providedIn: 'root',
)

看到我还添加了@Injectable()。您可以了解更多关于此here、here 或here 的信息。 @Injectable() 是每个 Angular 服务定义中的重要组成部分。

现在在类中,您需要添加一个构造函数,因为您打算使用路由器:

constructor(private router: Router)   

作为旁注,您可能需要更改 router.navigate 指向的位置,因为您位于不同的文件中,因此请务必检查这一点。

2 在app.module 中将服务设置为提供者

每当您在应用程序中使用服务时,您都需要在app.module(或您为应用程序使用的任何模块)中将其设置为提供者。这是一个快速修复。在您的 app.module.ts 文件中,在其他导入的顶部,添加以下内容:

import  TimeoutService  from './timeout.service';` 

然后,在@NgModule(...) 中,添加一个providers: [] 数组来保存您的所有服务。

@NgModule(
  imports:      ...
  ...
  providers: [TimeoutService]
)

现在应该像之前在组件中那样设置它。请让我知道,如果你有任何问题。 Here is the updated StackBlitz

【讨论】:

另外说明,在你的flight.component上,需要在构造函数中设置超时服务:... private timeoutService: TimeoutService(之前的私有)。我还修复了 ngOnInit 以调用服务来重置计时器,正如您在 StackBlitz 中看到的那样 非常感谢!这正是我所需要的。极好的! :)

以上是关于使用角度服务在多个组件中设置超时的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Java 1.4 中设置 BufferedReader 和 PrintWriter 的超时时间?

如何在 Ruby 的 RestClient gem 中设置超时?

在视图中调用脚本时设置超时?或在脚本中设置有效超时?

如何在 SQLAlchemy 中设置连接超时

在 Spring WebFlux webclient 中设置超时

在 python thrift 客户端中设置套接字的连接和读取超时