Angular 解析器不工作。路由从不订阅返回的可观察对象

Question

我正在尝试将解析器添加到我的 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());
    }
}

以下是 itemService 中的 getAll() 方法，解析器调用它来获取可观察对象。

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。因此，路由似乎没有订阅解析器返回的可观察对象。

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

编辑

如果我返回一个 promise 而不是一个 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)));
    }
}

Answer 1

您需要使用 Observable.create 运算符来创建自定义可观察对象。

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));
    });
}

Answer 2

发现问题。我按如下方式导入了 Observable（在项目服务和解析器中）。

import {Observable} from "rxjs/index";

当我把它改成following时，它开始起作用了。

import {Observable} from "rxjs";

第一个导入是由 Intellij IDEA 添加的。 Observable 工作正常，除了解析器。不清楚这两个import有什么区别

Angular 解析器不工作。路由从不订阅返回的可观察对象

Angular resolver is not working. Route never subscribes to the observable returned

angular

rxjs

observable

angular-routing

angular-resolver