Angular：“解决”生成一个无限循环答案

【问题标题】：Angular: "Resolve" generate an infinite LoopAngular：“解决”生成一个无限循环
【发布时间】：2020-04-30 10:58:31
【问题描述】：

我们在 App.module.ts 中，特别是在以下部分：

RouterModule.forRoot([
  {path: 'xxx/:xxx', component: XxxComponent},
  {path: '', component: HomepageComponent, resolve: {
      answerCallHttp: CallHttpResolve
    }},
  {path: 'error', component: ErrorComponent}
])

现在让我们去解决 CallHttpResolve 并进行一个简单的 Http 调用：

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> | Promise<any> | any {
      return this.HttpClient.get(this.api + '/retailer', {
        headers: new HttpHeaders({
          'Auth': this.memory.getToken()
        }),
        params: new HttpParams().set('system_device', 'desktop').set('system_platform', this.getBrowserName())
      }).toPromise().then(value => {return value;});
  }

运行这段代码时从来没有给我生成一个无限循环的 http 请求？我怎样才能停止这个循环？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

您能否将pathMatch: 'full' 添加到 Home 路由中，并检查它是否解决了您的问题？

即：

{path: '', component: HomepageComponent, pathMatch: 'full', resolve: {
  answerCallHttp: CallHttpResolve
}},

【讨论】：

【解决方案2】：

您可以尝试将重定向添加到“主”路径：

RouterModule.forRoot([
    {path: 'xxx/:xxx', component: XxxComponent},
    {path: '', redirectTo: 'home', pathMatch: 'full' },
    {path: 'home', component: HomepageComponent, resolve: {
        answerCallHttp: CallHttpResolve
    }},
    {path: 'error', component: ErrorComponent}
])

【讨论】：

【解决方案3】：

如果你想运行一个解析器并且还想在其中执行重定向，你可以这样做

{
        path: '',
        pathMatch: 'full',
        redirectTo: '',
        resolve: {
            yourresolver (you are redirecting to one of child route below from this resolver)
        },
        runGuardsAndResolvers: 'paramsOrQueryParamsChange'
    },
    enter code here
    {
        path: '',
        component: yourparentcomponent,
        children: [
            {
                path: child route,
                component: child component
            },
        ]
    }

{ 小路： ''，路径匹配：'完整'，重定向到：''，解决： { yourresolver（您正在从此解析器重定向到下面的子路由之一） }, runGuardsAndResolvers: 'paramsOrQueryParamsChange' },

{
    path: '',
    component: yourparentcomponent,
    children: [
        {
            path: child route,
            component: child component
        },
    ]
}`

【讨论】：