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

Posted 2023-02-23

【中文标题】使用角度服务在多个组件中设置超时

【英文标题】：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 中看到的那样

非常感谢！这正是我所需要的。极好的！ :)