使用角度服务在多个组件中设置超时
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 中设置超时?