Angular 服务不存储数据

Question

我正在尝试使用日期过滤器制作应用程序。所以这是我的问题：\

我想在我的服务中存储数据，但是当我路由时，我的阵列在服务中正在自行重置。

我如何才能永久保留数据供我使用。

这是我的代码：

task.service.ts

import { Injectable } from '@angular/core';
import { NewTaskPageComponent, ToDoTask } from './new-task-page/new-task-page.component';
import { task } from './app.component';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  tasks:ToDoTask[] = [];
  constructor() { 
  }
  addTask(task:ToDoTask){
    this.tasks.push(task);
  }
  getTasks():ToDoTask[]{
    return this.tasks;
  }

}

新任务-page.component.ts

import {AppComponent} from '../app.component';
import { Component, OnInit } from '@angular/core';
import { TaskService } from '../task.service';

@Component({
  selector: 'app-new-task-page',
  templateUrl: './new-task-page.component.html',
  styleUrls: ['./new-task-page.component.sass'],
  providers: [TaskService]
})
export class NewTaskPageComponent implements OnInit {
  newTask ?: ToDoTask;
  constructor(private _taskService:TaskService){

  }

  ngOnInit(): void {
  }
  sendTask(task:string,date:string): void{
    this.newTask = new ToDoTask(task,date);
    this._taskService.addTask(this.newTask);
    console.log(this._taskService.getTasks());
  }

}
export class ToDoTask{
  task: string;
  date: string;
  constructor(task:string,date:string){
    this.task = task;
    this.date = date;
  }

}

Answer 1

你的行为是因为，在你的组件上，你有这个：

@Component({
  selector: 'app-new-task-page',
  templateUrl: './new-task-page.component.html',
  styleUrls: ['./new-task-page.component.sass'],
  providers: [TaskService] // ----> delete this, you don't need it
})

应该是这样的：

@Component({
  selector: 'app-new-task-page',
  templateUrl: './new-task-page.component.html',
  styleUrls: ['./new-task-page.component.sass']
})

由于您已经在根目录中提供了 service，因此您无需在您的组件中再次提供它。

该服务已在您的整个应用程序中可用，任何组件都可以共享和访问该服务的同一实例。

Answer 2

我从你的第一个声明中了解到你希望它是永久的。存储是服务，在不同的组件中检索将有效，直到选项卡重新加载。

这个答案正确解释了方法。

您需要的是存储空间来存储您的任务并检索您想要的 when/wherever。

localstorage.setItem('task_key', your_task); //  (key, value) value you need to be in string

同样的方法你可以通过

获得任务

localstorage.getItem('task_key')  // This returns your_task which you stored earlier

你也可以使用 indexDB

这样即使您重新加载或重新启动浏览器，您的数据也将永久存储。

Angular 服务不存储数据

Angular services don't store data

service

angular