标签: angular-resolver

我正在尝试使用解析器来根据路由包含的给定参数检索数据。

不幸的是，当我添加另一个数据流时，我的数据依赖于解析器从未真正解析过。

如果我直接返回一个立即解决的值，一切正常。我调试了这种情况，看到我收到了所有部分信息，但最终未能真正解决。

这是一个快速示例。如果需要更多代码来理解问题，请联系我。

我的服务：

export class MyService {
  get(bar) {
    return of(new Foo(bar));
  }
}

SecondService（这个从后端检索数据）：

export class SecondService {
  private readonly _observable: Observable<Bar>;
  constructor() {
    this._observable = merge(
      // Other manipulations
    ).pipe(
      // other manipulations
      shareReplay(1)
    )
  }

  observable(): Observable<Bar> {
    return this._observable;
  }
}

解析器：

export class MyResolver {
  constructor(_secondService: SecondService, _myService: MyService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
    // Does not work - Simply does not resolve
    // return this._secondService
    //   .observable()
    //   .pipe(
    // …

当解析器执行某些工作时，是否可以显示微调器而不是空页面？

我有一个带有两个解析器的模块：

 const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    canActivate: [MyAuthGuard],
    resolve: {
      vehicles: FirstResolve,
      drivers: SecondResolve
    },
    children: [
      {
        path: '',
        component: FirstComponent
      },

      {
        path: ':id',
        component: SecondComponent
      }
    ]
  }
];

每个解析器都会执行一些耗时的操作，例如向服务器发出请求：

@Injectable()
export class FirstResolve implements Resolve<Entity[]>{

  constructor(
    private _firstService: FirstService,
    private _secondService: SecondService,
    private _store: Store<any>
  ) { }

  async resolve(): Promise<Entity[]> {
    let data = await Promise.all([
      this._firstService.getEntities(),
      this._secondService.getEntities()
    ]);

    this._store.dispatch(...);
    this._store.dispatch(...);

    return;
  }

}

你能帮我弄清楚吗？

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

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]> | Observable<never> {
    return this.countryService.getCountries().pipe(      
      mergeMap((countries) => {
        if (countries)
        {
          return of(countries);
        }
        return EMPTY;
      }),
      catchError(error => {
        this.toasterService.pop('error', '', 'There was a problem prefetching the data required to submit a request. If the problem persists, please notify the administrator.');
        return EMPTY;
      }));
  }

我希望这段代码能够根据角度文档取消导航。

我正在使用路由器解析器以便在加载页面之前获取我的 ngrx 存储数据。将解析器插入我的路由后，路由器不会生成我的内容

<router-outlet></router-outlet>

其他路由（没有解析器）运行良好，如果我从路由中删除解析器，则页面加载得很好。

我的解析器文件：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Store } from '@ngrx/store';

import { MenuItem } from '../navbar/menuItem.model';

import * as fromApp from '../store/app.reducer';

@Injectable()
export class MenuItemsResolver implements Resolve<MenuItem[]> {
    constructor(
        private store: Store<fromApp.AppState>
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
        Observable<MenuItem[]> | Promise<MenuItem[]> | MenuItem[]
    {
        return this.store.select('menuItems').pipe(
            map((data: { menuItems: MenuItem[] }) …