Question

当我启动我的角度应用程序时，在init上，我点击和端点返回特定路径的数据，所以当我转到主页时，我查询数据库中的主页数据并返回该数据。同样，当我转到联系路径时，我在数据库中查询联系人数据并返回。这需要在每次导航到路径时调用数据库。所以我的问题有两个部分。

当第一次加载应用程序时，我可以获取所有页面的数据，然后当用户访问主页时，我只是过滤此对象客户端，当他们访问联系时，我可以过滤该客户端的数据而不是命中端点？我怎样才能做到这一点？
其次，一旦我获得了家庭和联系人的数据，缓存数据的最佳方法是什么，所以我不必点击端点或者只是继续重用我得到的对象在应用程序最初加载时？

由于

Answer 1

在组件之间传递数据的推荐方法是使用服务。 由于Angular 2中的服务是单例 *，当您的其他组件请求它时，它将接收与您的数据相同的实例。这就是你如何实现你想要的目标

<强>服务

export class DataService {
  public dataOne: Data;
  public dataTwo: Data;
}

<强> BaseComponent

...
constructor(private dataService: DataService) { }

ngOnInit() {
  // Make your calls and populate these variables with the corresponding data
  this.dataService.dataOne = {};
  this.dataService.dataTwo = {};
}
...

<强> ConsumerComponent

...
constructor(private dataService: DataService) { }

ngOnInit() {
  // get the data you added in the base component
 var dataOne = this.dataService.dataOne; 
}
...

* Angular 2服务是单个每个提供商，所以如果您将其添加到app.module.ts中的提供商，它将是一个真正的单身人士，否则，您将获得每个提供商的新实例

Answer 2

你绝对应该使用ngrx / store。

此策略使用redux模式将应用程序中的持久数据（应用程序状态）存储在不可变的单一事实源中，使其可以在应用程序的每个组件中访问。

您的主商店将仅由您的组件调度的操作进行修改，因此所有业务逻辑都不依赖于组件，可以在组件之间重用功能（在这种情况下为操作），而无需每次都重写它们

在每个组件中，您将能够选择此主要商店的一部分并订阅它的更改，因为此函数返回一个可观察的，因此您的组件将始终与您的主商店保持同步（状态）。

看看这些教程，他们非常好地解释了这个概念： https://malcoded.com/posts/angular-ngrx-guide https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0

在开始时它有点棘手但是相信我，一旦你理解它，你就会忘记Angular服务，事件发射器，@ input和@output来创建组件交互和数据可重用性，你会看到将业务逻辑从组件中移开并能够从任何地方重用它都是多么令人惊奇。

使用这个概念确实让事情变得非常简单。

缓存数据并在角度2的路径之间传递数据？

2 个答案: