Resolver或Guard - 更适合使用ngrx获取数据

Question

使用Angular和ngrx，我想导航到一个路由并确保在ngrx / store中可以获得所需的数据。我正在使用ngrx / store action / effect / reducer来物理调用API。路由加载的组件通过存储访问数据，因为系统的其他部分可能更新数据。

如果无法加载数据，则会调度LOAD_FAILED操作，可以通过多种方式处理。

我应该使用警卫还是解析员？每种方法的其他优点和缺点是什么？你有什么尝试，如果你有时间，你会以同样的方式做吗？以下是我的一些想法。

Option 1: Guard

访问路径时，警卫可以激活检查以查看数据是否在商店中，如果没有，则从API加载，并将其添加到商店。如果数据无法加载，则canActivate将返回false（作为可观察的）。

这种方法的缺点是“加载数据不应该是一个后卫​​的责任”，但如果数据无法加载则具有防止访问的优势，并且路由器可以处理“未找到”的漏洞，这两者都是属于责任范围。

Option 2: Resolver

访问路径时，任何其他防护装置都允许激活，将调用解析程序。此解析程序检查数据是否在存储中，如果不存在，则触发LOAD操作，从API加载并添加到存储。然后，一旦加载了数据，解析器就会返回一些任意数据，当组件使用商店时，这些数据被路由/组件丢弃。如果数据无法加载，则会将某些内容重定向到未找到的页面

这种方法的缺点是旋转变压器没有在传统意义上使用，例如它返回的数据被丢弃。此外，解析器需要在找不到时重定向到404，或者LOAD_FAILED需要重定向。这增加了复杂性，因为有时候LOAD_FAILED不应该重定向，例如当后台操作触发加载时。从好的方面来说，解析器负责加载数据。

Answer 1

在我的项目中，我们使用的是NgRx商店，我们使用Guards来获取数据。这种方法有利有弊，但从我的观点来看，解析器并不适合这种类型的数据处理，而Angular缺少一些额外的类，比如PreloadingGuard（或者类似的） - 什么会在防守之间和解析器 - 将负责获取数据，但不会访问该路由。让我们列出一下缺点和优点：

缺点：

• 获取数据不是Guard的责任，这违背了他们的定义

优点：

• 在重定向实际完成之前，数据必须保留在商店内 - 这是'必须'。可以说我们可以在组件的顶部使用* ngIf，但从最终用户的角度来看它看起来很奇怪：你在页面A上，单击按钮，然后页面是白色的（加上顶部可能有一些微调器），突然间内容出现，你在B页。有了警卫我们没有'白页'部分 - 一切都很顺利和好看。
• 如果使用了guard并且无法获取数据 - 用户未被重定向到另一个路由，则他/她将保留在之前的位置。与解析器一样 - 用户挂在中间的某个地方，因为他已经把他移到了不同​​的路线，我们需要一些额外的代码让他回到他原来的地方。
• 通常，您可以使用Effect来异步获取数据。您可以编写LoadSth，LoadSthSuccess，LoadSthError等操作。使用guard，您不需要任何Effect，并且您不需要3个动​​作（LoadSthSuccess就足够了）。您可以在保护中调用您的服务，然后调度LoadSthSuccess操作。就个人而言，我只在必要时使用效果 - 这些野兽很棘手，我强烈建议尽量避免使用它们。警卫只是更好的替代品。
• Guards的错误处理要好得多。您基本上不希望用户看到损坏的页面（包含不完整的数据）。 Guards将帮助您实现它 - 显示一些错误模式并从守卫返回Observable.of（false）+停留在前一个视图
• 您可以在多个地方使用相同的防护并仅在状态为空时获取数据 - 因此您确定只加载数据一次，并确保在访问某些路径时实际加载了数据