Question

在我的第一个Home组件上，在ngOnInit上我调用了一个函数，该函数将结果订阅到变量并显示这些结果：

  ngOnInit() {
       this.dataService.getAllData().subscribe(results =>
             this.userData = results.userData;
   }

在我的HTML上，我有一个函数，我需要从数组中删除一些元素：

      this.userData.splice(this.removedIndex, 1)

当离开该屏幕并返回时，由于ngOnInit，userData将再次获得来自服务的所有数据，并且我需要仅在拼接后保留数据。注销并重新登录后，即可显示所有数据。有没有办法实现这个目标？有什么建议吗？

感谢。

Answer 1

将数据保留在服务上，而不是本地。它可以是简单的事情：

class DataHoldingService {
  data$ = new BehaviorSubject<any[]>([1, 2, 3, 4]);
  // or get from, say, backend:
  constructor() {
    this.backend.getData().subscribe(data => this.data$.next(data));
  }
}

然后你的组件在init上获取它：

class MyComponent {
  myData: any[];
  constructor(private dataService: MyDataService) {}
  ngOnInit() {
    this.dataService.data$.subscribe(data => this.data = data);
  }

  // when removing that index:
  removeData(index: number) {
    this.data.splice(index, 1);
    this.dataService.next(this.data);
  }
}

这样，当您的组件删除索引时，您将获得有关服务以及本地的更新数据。

为了在整页重新加载中生存，您需要更多。这是一个天真的例子：

class DataHoldingService {
  data$: new Observable<any[]>;
  private dataObserver: Observer;
  constructor() {
    this.data$ = new Observable(observer => {
      this.dataObserver = observer;
      this.loadInitialData();
    });
  }

  setData(data) {
   localStorage.setItem('data', JSON.stringify(data));
   this.dataObserver.next(data);
  }

  loadInitialData() {
    let data = [];
    try {
      data = JSON.parse(localStorage.getItem('data'));
    } catch (e) {
      /* no data */
    }
    this.dataObserver.next(data);
}

当然，现在您的组件无法拨打next()，但必须使用setData()：

class MyComponent {
  // other stuff is the same

  // removing that item, or adding or whatever
  removeItem(index: number) {
    this.data.splice(index, 1);
    this.dataService.setData(data);
  }
}

现在，您的数据服务将始终在localStorage中保留数据的副本。因此，即使刷新页面，您仍然可以获得编辑过的数据。您仍然需要管理它的生命周期（从后端加载数据，您可能需要有条件地执行初始加载，在登录/注销时清理等）。

Answer 2

您可以使用HTML5 localstorage来保存数据 - 在关闭浏览器后检索数据

2.创建服务并注入app.module.ts以便所有组件共享相同的服务实例

Angular - 即使在导航后仍保留变量值

2 个答案: