代码之家 › 专栏 › 技术社区 › Lahiru Chandima

角度分解器不工作。路由从不订阅返回的Observable

angular-resolver angular-routing observable rxjs angular

1

Lahiru Chandima · 技术社区 · 8 年前

我试图添加一个旋转变压器到我的角度应用的路线。

下面是分解器。

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

2 回复 | 直到 8 年前

1

Lahiru Chandima 8 年前

找到了问题。我已经进口了 Observable 如下(项目服务和冲突解决程序中)。

import {Observable} from "rxjs/index";

当我把它改成following时,它开始工作了。

import {Observable} from "rxjs";

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

2

0

Reactgular 8 年前

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