解析器无法解析是否添加了另一个数据流

时间:2018-07-12 13:07:38

标签: angular angular6 angular-router angular-resolver

我正在尝试使用解析器以便根据路由所具有的给定参数来检索数据。

不幸的是,当我添加另一个数据流时,我的数据依赖于解析器,但实际上并没有解析。

如果我直接返回立即解析的值,则一切正常。 我调试了这种情况,发现我收到了所有部分信息,但最终还是无法真正解决。

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

MyService:

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>

2 个答案:

答案 0 :(得分:2)

我的问题的答案很简单,与订阅已解析的可观测对象无关,因为我已经在(目标)组件中做到了。

由于某种原因,我不得不使用take(1)只排放一次我的SecondService,我想是因为它在幕后使用了shareReplay(1)(对此并不完全确定-命中我在评论中// //如果您有更多的见解,请对其进行编辑。)

因此,所有代码都保持不变,除了将解析器更改为:

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

@eduPeeth:不幸的是,感谢您的回答/建议,这是一个非常小的问题。

答案 1 :(得分:1)

仅当您显式调用Observable.subscribe()时,obbable才会执行。在您的代码中没有看到您要订阅Observable的地方。

注意:解决的概念与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)),          
     });
  }
}

在需要结果的地方订阅。