Question

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

以下是解析器。

@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方法，解析器调用该方法以获取可观察的对象。

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。因此，路由似乎不接受解析程序返回的可观察值。

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

修改

如果我返回的是诺言而不是可观察的话，那么它将正常工作。

@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（在项服务和解析程序中）。

import {Observable} from "rxjs/index";

当我将其更改为以下内容时，它开始起作用。

import {Observable} from "rxjs";

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

Answer 2

您需要使用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));
    });
}

角解析器不起作用。路线从不订阅可观察的返回

2 个答案: