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

Question

我在做什么：

我的路线上有一个有角度的决心守卫/work/:slug。我想立即使用本地数据的 Observable 解决该守卫，同时通过网络获取远程数据。网络请求成功后，将本地数据替换为远程。

笔记：

• 我的本地数据tombstoneDefault.data只是一个 javascript 数组。
• 我使用 Observable.from() 来包装我的本地数据。
• 我的网络请求this.someService.getData()将返回一个 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

在解析器中返回一个具有静态数据的可观察对象，然后从 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}
    }
  ];