1

我正在尝试将解析器添加到我的 Angular 应用程序的路由中。

以下是解析器。

@Injectable()
export class ItemsResolver implements Resolve<Item[]> {
    constructor(private itemService: ItemsService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item[]> {
        return this.itemService.getAll().pipe(first());
    }
}

以下是 中的getAll()方法itemService，解析器调用该方法来获取 observable。

public getAll(): Observable<Item[]> {
    console.log('get all called');
    return new Observable<Item[]>(subscriber => {
        console.log('new subscription for items observable');
        this.db.list<Item>('items')
            .valueChanges()
            .subscribe(entities => {
                const items: Item[] = entities.map(entity => entity != null ? new Item(entity) : null);
                ItemsService.setInstances(items);
                subscriber.next(items);
            }, error => subscriber.error(error));
    });
}

以下是使用此解析器的路由定义。

        {
            path: 'edititem/:id', component: EditItemComponent, data: {title: 'Edit Item', type: 'edit'}, resolve: {
                items: ItemsResolver
            }
        }

当用户导航到该路线时，应用程序挂起并且导航未完成。可以看到，只有get all called在控制台登录，new subscription for items observable没有登录。所以，看起来路由没有订阅解析器返回的 observable。

这可能是什么原因？我该如何进一步解决这个问题？

编辑

如果我返回一个承诺而不是一个可观察的，它可以正常工作。

@Injectable()
export class ItemsResolver implements Resolve<Item[]> {
    constructor(private itemService: ItemsService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Item[]> {
        return new Promise<Item[]>((resolve, reject) => this.itemService.getAll().pipe(first()).subscribe(value => resolve(value), error => reject(error)));
    }
}
4

2 回答 2

1

发现问题。我已经导入Observable如下（在项目服务和解析器中）。

import {Observable} from "rxjs/index";

当我将其更改为跟随时，它开始起作用。

import {Observable} from "rxjs";

第一个导入是由 Intellij IDEA 添加的。Observable 工作正常，除了解析器。目前尚不清楚这两种进口产品有什么区别。

于 2018-07-26T15:42:02.717 回答
0

你需要使用Observable.create操作符来创建自定义的 observables。

public getAll(): Observable<Item[]> {
    console.log('get all called');
    return create<Item[]>(subscriber => {
        console.log('new subscription for items observable');
        this.db.list<Item>('items')
            .valueChanges()
            .subscribe(entities => {
                const items: Item[] = entities.map(entity => entity != null ? new Item(entity) : null);
                ItemsService.setInstances(items);
                subscriber.next(items);
            }, error => subscriber.error(error));
    });
}
于 2018-07-26T14:47:34.333 回答