问题标签 [angular-resolver]

我有一个组件依赖于其内容的 API 响应。我已经设置了解析器，但它仍然会在我的数据准备好之前返回。

如何让我的pull_categories()函数等到收到响应正文然后返回？而不是返回一个空对象，因为它不会等待甚至在我下面的例子中调用它。

服务.ts

组件.ts

解析器.ts

应用程序路由.module.ts

基本上我有一个通知组件，它在单击标题中的图标时显示通知。当我们单击标题上的图标时，它会打开一个弹出窗口并显示通知列表。单击任何通知时，它将用户路由到该特定通知的组件，例如单击通知时，它将用户带到该路由：profile/guest/{guestid}/alerts/{alertid}。但是当我们点击上述路由的另一个通知时，它会更改路由参数，但不会重新加载新警报的数据，而只会显示旧路由的数据。

注意：显示的数据是从路由解析中获取的。由于组件已经加载，当我们点击另一个通知时，它不会调用 ngOnInit 或构造函数。但是当我们刷新页面时，它会根据更新的路线显示正确的数据。

我尝试实施不同的路由器配置解决方案来重新加载解析数据。例如 runGuardsAndResolvers 和 onSameUrlNavigation。

我还尝试在其他角度组件生命周期钩子（例如 ngAfterViewInit 或 ngAfterViewChecked）中调用设置数据的函数。

我尝试了更多解决方案，但所有这些都没有用。

预期结果：点击其他通知后，路由参数应更改并显示更新数据的所需页面。

实际结果：只有路线发生变化，数据没有变化。

我有一个从服务调用 getSchools() 的决心

解析器.ts

我的服务

我的组件

我的组件中的数据未定义，因为它在我的解析器获取数据之前被调用。

我该如何解决？

在我的主页上，我有一个组件可以从 API 调用中获取前 3 个最新帖子：

在.ts文件中，我得到这样的帖子：

调用是在解析中进行的：

其中有这个代码：

我希望能够在另一个页面上重新使用该组件，然后将获得 6 个最新帖子。

我像这样将参数绑定到limit组件上

并.ts为我添加的那个组件添加：

并在ngOnit()控制台中注销limit我输入的任何值，它显示该位正在工作。

我的问题是，如何将传入的值传递给 Resolve，以便我可以在许多具有不同值的页面上重新使用该组件？

我实现了一个加载动画，它显示了一个微调器对 Angular 的路由器事件（NavigationStart、NavigationEnd）做出反应，效果很好。但是最初调用的第一个组件可能有一个从 API 获取数据的解析器，有时需要超过 2 秒的时间来加载。但我没有得到任何路由器事件，所以加载动画没有显示。此外，当组件被解析时，路由器上没有任何事件。任何想法如何为第一个调用的组件实现加载指示器？

检查此流程：

1. AppComponent 被引导

2. 加载 AppComponent 后，来自 index.html 的加载动画消失了（很好）

3. 路由确定要加载的组件。

4. 该组件的解析器开始从 API 获取数据。

5. 没有加载动画，因为此时路由器没有发出任何事件。

6. 解析器完成并加载组件。

7. 通过路由切换组件。

8. 路由器发出事件（显示加载动画）

注意：当然，我的 index.html 中也有一个加载动画，但这不是我想要的......

我写了一个简短的代码来尝试组件中的路由解析器和订阅。这是路线配置：

Resolver 简单地实现了 Resolve 接口：

然而，我用来将事件映射作为 Observable 的服务：

最后，在组件的 ngOnInit() 方法中：

控制台消息始终返回：未定义，但在服务中，事件映射大小正确返回：

那么那段代码有什么问题呢？

我有一个这样的解析器：

在我的组件内部，我有：

我需要移动this.router.navigate([ /error/404]); 在解析器内部，这样解析器将检查数据是否为空并重定向到错误，而不是组件。或者也许移动到看起来像这样的身份验证守卫

DocumentsTask(taskId) 返回 Observable

I implemented a route resolver but the entire target component (events-list.component.ts) is not shown in the browser. I only see the navbar. As shown below, the resolver gets the list of events from the events service. And no errors are shown in the Chrome developer tools console. I also tried loading the app in the Firefox browser, but the problem still persists. What could be wrong with my code? Thanks.

routes.ts file

The 'events' route is the default route which I am having the problem with.

event.service.ts file

resolver.service.ts file

event-list.component.ts file

events-list.component.html

I don't even see the h1 tag's text "Upcoming angular events". I only see the navbar and then the rest of the page is blank.

events-app.component.ts file (main bootstrapped component)

我有一个 Angular 应用程序，用户可以使用包含令牌的直接链接访问其中，如下所示：

localhost:3000/token/<alphanumeric string>

相关组件会检查令牌的有效性，如果成功则加载页面内容。

用户访问应用程序后，我想将地址栏中的 URL 更改为：

localhost:3000/homepage

这是我的路由文件的一部分：

这是解析器：

我尝试通过以下方式更改路由：

我什至尝试删除redirectTo和使用resolve: {redirectTo: 'homepage', data: TokenResolver}. 两种方式都行不通。第一个是因为它似乎在执行redirectTo之前resolve。第二个是因为我不能声明没有组件的路径，或者redirectTo 等等。

所以我尝试了以下方法：

路由文件：

解析器文件：

这可行，但正如您所见，我必须HomepageComponent在路由文件中声明两次。此外，我必须data在resolve函数中返回，即使我不再使用该返回。

你知道更好的方法来满足我的需要吗？

我正在添加一个 Angular 8 路由解析器来预取数据。失败后（出于任何原因），我返回一个 EMPTY 以取消路线导航。但是，当我对此进行测试时，我可以进入 catchError 块，它显示烤面包机，并返回 EMPTY，但不会取消路线导航。根据我读过的所有文章，这应该有效。想知道是否有人看到我没有看到的东西。我只包含了 resolve 方法，因为所有其他配置都在工作。

我希望此代码根据角度文档取消导航。