Установка тайм-аута в нескольких компонентах с сервисом в angular - PullRequest
Новая
       23

Установка тайм-аута в нескольких компонентах с сервисом в angular

0 голосов
/ 17 июня 2020

Я пытаюсь установить тайм-аут в наборе компонентов с помощью службы angular. Я пытался следить за материалами, которые нашел в Интернете, но немного застрял. Я уже создал файл 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);
  }
}

1 Ответ

1 голос
/ 17 июня 2020

Вы на правильном пути. Однако, когда вы скопировали код в службу, вы пропустили несколько важных шагов:

  1. Импортируйте все, что вам нужно в службе, и используйте конструктор, как вы были в компоненте
  2. Установить создать службу в качестве поставщика в app.module

1 Импортируйте все, что вам нужно в службе, и используйте конструктор, как в компоненте

В службе вы только иметь @HostListener без надлежащего импорта. Вверху файла service.ts я добавил следующее: 

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


@Injectable({
  providedIn: 'root',
})

Смотрите, я также добавил @Injectable({}). Вы можете узнать больше об этом здесь , здесь или здесь . @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]
})

Теперь это должно быть настроено так же, как и раньше, в компоненте. Пожалуйста, дай мне знать, если возникнут какие-либо вопросы. Вот обновленный StackBlitz

...