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

Question

我正在尝试使用角度服务在一组组件中设置超时。我试图按照我在网上找到的材料进行操作，但我有点卡住了。我已经创建了 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);
      }
    }

Answer 1

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

1. 在服务中导入您需要的所有内容，并像在组件中一样使用构造函数
2. 在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