如何解析包裹在可观察对象中的本地数据，然后在 Angular+ 中用远程数据替换数据

Question

我在做什么：

我的路线 /work/:slug 上有一个 angular resolve guard。我想立即用本地数据的 Observable 解决这个问题，同时通过网络获取远程数据。网络请求成功后，将本地数据替换为远程。

备注：

我的本地数据是 tombstoneDefault.data，它只是一个 javascript 数组。
我使用 Observable.from() 来包装我的本地数据。
我在 this.someService.getData() 上的网络请求将 return 一个 Observable。

问题，我如何链接 [Observable.from][1] 我的研究引导我 switchMap 或者我如何在 RXJS 中使用不同的运算符来完成这个？

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { POST_TABLE as tombstoneDefault } from './work-post.content';
import { Observable } from '[rxjs][1]/Observable';

@Injectable()
export class WorkPostResolve implements Resolve<any> {
  constructor() {
  }

  resolve(route: ActivatedRouteSnapshot): any {
    // get tombstoneDefault data
    // then replace with this.someService.getData(route.params.id)
    return Observable.from(tombstoneDefault.data).filter(post => {
      return post.slug === route.params.slug;
    }).switchMap((result) => { // this errors out
      // this.someService.getData(route.params.id)
    });
  }
}

Answer 1

Return Resolver 中的一个 observable 具有静态数据，之后它 return 来自 BE 的动态数据。

https://plnkr.co/edit/ka6ewGPo1tgnOjRzYr3R?p=preview

  @Injectable()
  export class MyResolver implements Resolve<any> {
    constructor(private router: Router) {
    }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
      return Observable.of(
        Observable.concat(
          Observable.of('static data'),
          Observable.timer(5000)
            .switchMapTo(Observable.of('dynamic'))
        )
      );
    }
  }

  @Component({
    selector: 'my-cmp',
    template: `my cmp {{obs$ | async}}`
  })
  export class MyCmp {
    obs$;

    constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit(): void {
      this.obs$ = this.activatedRoute.data
        .pluck('group')
        .switchMap(x => x);
    }
  }

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <h2>Hello {{name}}</h2>
        <router-outlet></router-outlet>
        <a routerLink="/path">go path</a>
      </div>
    `,
  })
  export class App {
    name: string;

    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }

  let routes = [
    {
      path: 'path',
      component: MyCmp,
      resolve: {group: MyResolver}
    }
  ];

如何解析包裹在可观察对象中的本地数据，然后在 Angular+ 中用远程数据替换数据

How to resolve local data wrapped in an observable then replace data with remote in Angular+

angular

rxjs

angular-router-guards