如果添加了另一个数据流，解析器不会解析

Question

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

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

如果我直接 return 立即解析值，一切正常。我调试了情况，看到我收到了所有部分信息，但最终还是没有真正解决。

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

我的服务：

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(
    //     switchMap((bar) => this._myService.get(bar)),
    //   );

    // WORKS
    return of(new Foobar('sampleData'));
  }
}

路由器：

const routes: Routes = [
  {
    path: 'someroute',
    component: SomeComponent,
    canActivate: [SomeGuard],
    resolve: {
      myData: MyResolver,
    },
  },
];

组件：

export class SomeComponent implements OnInit {
  constructor(private readonly _route: ActivatedRoute) {}

  ngOnInit() {
    this._route.data
      .subscribe((data) => {
      console.log('received:', data);
      this.myData = data;      
    });
  }
}

SomeComponent.html

<pre *ngIf="myData">
  Received: {{ myData | json }}
</pre>

Answer 1

Observable 仅在您显式调用 Observable.subscribe() 时执行。我在您的代码中没有看到您订阅 Observable 的任何地方。

注意：resolve 的概念与 Promise 相关，与 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(
         take(1),
         switchMap((bar) => this._myService.get(bar)),
       }     
       );

    // WORKS
    return of(new Foobar('sampleData')).pipe(
         take(1),
         switchMap((bar) => this._myService.get(bar)),          
     });
  }
}

在需要结果的地方订阅。

Answer 2

我的问题的答案相当简单，与订阅已解析的可观察对象无关，因为框架已经自动完成了。

为了让解析器完成，它所依赖的所有流都需要 complete。如果您碰巧使用热可观察对象，则需要使用另一个运算符，例如 take，以便流在该位置完成。

因此，所有代码都保持不变，只是我将解析器更改为：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
  return this._secondService
    .observable()
    .pipe(
      take(1),
      switchMap((bar) => this._myService.get(bar)),
  );
}

@eduPeeth：感谢您的 answer/suggestions，不幸的是，这是一个小得多的问题。

如果添加了另一个数据流，解析器不会解析

Resolver does not resolve if another data stream is added

angular

angular6

angular-router

angular-resolver