时间戳

首页 > 解决方案 > 以 Angular 7 保存和访问服务中的数据

angular - 以 Angular 7 保存和访问服务中的数据

问题描述

我最近开始使用新语法研究 Angular 的最新版本，但我熟悉 Angular v1。

我正在开发一个 ionic(v4.12.0) 项目，下面是示例 angular(v7.2.15) 服务TodoService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TodoService {
  private todos = [];

  constructor(private http: HttpClient) {
    console.log('Constructor TodoService');
  }

  list() {
    // log shows this.todos as empty, always
    return this.todos;
  }

  add(todo object) {
    this.todos.push(todo);
    // log shows this.todos having 1 element now. it never goes beyond 1 irrespective of the number of todos added from the modal form 
  }

}

我创建了一个模式TodoAddPage来从表单中读取并向todosin添加一个条目TodoService 

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ModalController } from '@ionic/angular';
import { TodoService } from './todo.service';

@Component({})
export class TodoAddPage implements OnInit {
    constructor(
      private modalController: ModalController,
      private todoService: TodoService
    ) {}

    close() {
      this.modalController.dismiss({
        dismissed: true
      });
    }

    onSubmit(todo: object) {
      this.todoService.add(todo);
      this.close();
    }
}

TodosPage列出待办事项的页面TodoService 

import { Component, OnInit } from '@angular/core';
import { AlertController, ModalController } from '@ionic/angular';
import { TodoAddPage } from './todo-add.page';
import { TodoService } from './todo.service';

@Component({})
export class TodosPage implements OnInit {

  public todos = [];

  constructor(
    private modalController: ModalController,
    private todoService: TodoService
  ) {
    this.todos = this.todoService.list();
  }

  ngOnInit() {
  }

  async add() {
    const modal = await this.modalController.create({
      component: TodoAddPage,
      componentProps: { value: 123 }
    });

    await modal.present();

    const { data } = await modal.onWillDismiss();
    console.log(data);

    console.log(this.todoService.list()); // Issues: This is always empty
  }

}

问题是TodoService.list()总是返回空列表。TodoService.add我检查了在函数中添加日志。并且数据似乎在函数的TodoService.todos后面。但是，如果我立即访问它并关闭模式，则该函数返回的内容为空。.push.add.list()

这种行为似乎有点奇怪，有人遇到过这个问题吗？还是我在这里做错了什么？

标签： angularionic-framework

解决方案

想通了这个问题。

在发布问题时，我抽象出组件定义，如下所示

@Component({})
export class TodoAddPage implements OnInit {}

但实际内容Component是

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.page.html',
  styleUrls: ['./todo-add.page.scss'],
  providers: [TodoService] // This was the one causing the issue
})

删除了上面的提供者（不确定我何时或为什么添加那里），它解决了这个问题。

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.page.html',
  styleUrls: ['./todo-add.page.scss'],
})

推荐阅读