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

Question

我正在尝试使用角度服务在一组组件中设置超时。我尝试遵循在网上找到的资料，但是有点卡住了。我已经创建了timeout.service.ts文件并将代码放在此处，但是遇到多个错误。我需要帮助来解决这个问题。超时在组件本身中时可以正常工作，但我想根据DRY方法进行工作。感谢您为解决此问题提供的支持！

STACKBLITZ：https://stackblitz.com/edit/flight-date-picker-with-service

COMPONENT.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} from "@angular/core";
现在在该类的内部，因为您打算使用路由器，所以需要添加一个构造函数：

constructor(private router: Router) { }注意，由于您位于其他文件中，因此可能需要更改router.navigate指向的位置，因此请确保选中此选项。

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

每次在应用程序中使用服务时，都需要在app.module（或用于该应用程序的任何模块）中将其设置为provider

。这是一个快速修复。在app.module.ts文件的其他导入文件的顶部，添加以下内容：

import { TimeoutService } from './timeout.service';

然后，在@NgModule({...})中添加providers: []数组以容纳您的所有服务。

@NgModule({
  imports:      ...
  ...
  providers: [TimeoutService]
})
现在应该像以前一样在组件中进行设置。请让我知道，如果你有任何问题。 Here is the updated StackBlitz