Question

我正在尝试使用Angular Route Resolve在路由激活之前获取组件数据。

我见过的所有例子都在服务中调用一个方法并返回，我在服务中有5个不同的方法，需要调用b4组件被激活。

以下是我想要实现的示例，ContactService有3个方法都需要调用 - 如何在一次调用中返回所有3个方法？

任何指示赞赏。

Contact-Resolver.ts - 下面

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { ContactsService } from './contacts.service';

@Injectable()
export class ContactResolve implements Resolve<Contact>
{

  constructor(private contactsService: ContactsService) {}

  resolve(route: ActivatedRouteSnapshot)
  {
    return this.contactsService.getContact(route.paramMap.get('id')); //method in Service
  }

//  return this.contactsService.getCities(); //Another method in Service that also needs to be called

 // return this.contactsService.getAllParts(); //Another method in Service that also needs to be called


}

Answer 1

您可以只使用等待所有源Observable完成的forkJoin：

resolve(route: ActivatedRouteSnapshot) {
  return Observable.forkJoin(
    this.contactsService.getContact(route.paramMap.get('id')),
    this.contactsService.getCities(),
    this.contactsService.getAllParts()
  );
}

所有结果将在包含3个项目的单个数组中提供。

Answer 2

Resolve接口定义如下：

interface Resolve<T> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T
}

方法resolve可以返回Observable，Promise或只返回某种类型的对象。在您的情况下，您应该订阅ContactService内的联系人，城市和部分。当在那里接收到所有三个数据时，将它们组合在一个对象中并以单独的方法返回，例如。 getCombinedData，你可以从解析器调用。

另一种选择是使用马丁建议的RxJS forkJoin，但是如果您想准备一个结合了结果的结构化对象，请手动完成。

Angular4在导航Route Resolve之前获取数据

2 个答案: