角度路线无法从可观察的角度解决

时间:2017-06-06 13:33:10

标签: angular

我正在尝试解决Angular中的路由而无法解决它。虽然旋转变压器在返回值时起作用,但它不会继续到预定的路径。我的路由器定义如下......

{ 
    path: 'sortation', 
    component: SortationComponent,
    resolve: {
        cage: 'cageResolveService'
    }           
}

...我用简单的链接打电话

        <a class="btn btn-block btn-danger btn-sm" routerLink="/sortation" routerLinkActive="menu-active">
            Sortation
        </a>

...我的cageResolveService读取

import { Injectable, Inject, OnDestroy } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from "rxjs/Observable";
import { Cage } from '../_models/cage';

@Injectable()
export class CageResolveService implements Resolve<any> {

cage;

constructor(
    @Inject('cageService') private cageService,
    @Inject('appUtilityService') private appUtilityService,
    @Inject('flashService') private flashService
) {}

ngOnDestroy() {
    this.cage.unsubscribe();
}

resolve(route: ActivatedRouteSnapshot): any {

    let criteria = {
        "limit": 3,
        "orderBy": "createdAt",
        "state": "PICKED"
    }

    // Subscribe to the observable
    this.cage = this.cageService.load( this.appUtilityService.encode( criteria ) )
    .subscribe();

    return this.cageService.cages$
    .map( cages => {

        if( cages && cages.length )
        {
            let c = cages.find( cage => cage.state === 'PICKED' );
            return c;
        }
        else
        {
            this.flashService.command.next({message: 'Error : No ready cages at this time', type: 'danger'});
            return false;
        }
    });
}
}

请问有人可以提供建议吗?如果我删除解析器,路由工作正常。这是一个让我疯狂的愚蠢问题。

2 个答案:

答案 0 :(得分:1)

对于任何挣扎的人来说,问题都是因为没有关闭观察者。我在解析器中修改了我的代码,如下所示:

cageResolverService

import 'rxjs/add/operator/first'
...
... ...

resolve(): any {

    let criteria = {
        "limit": 1,
        "orderBy": "createdAt",
        "state": "PICKED"
    }

    // Subscribe to the observable
    this.cage = this.cageService.load( this.appUtilityService.encode( criteria ) )
    .subscribe();

    var self = this;

    return self.cageService.cages$
    .map( cages => {

        if( cages && cages.length )
        {
            return cages.find( cage => cage.state === 'PICKED' );
        }
        else
        {
            self.flashService.command.next({message: 'Error : No ready cages at this time', type: 'danger'});
            return false;
        }
    })
    .first();
}

注意:添加“first();”在方法结束时关闭observable并允许路由呈现。

感谢您的帮助。

答案 1 :(得分:0)

 [routerLink]="['sortation']  I think routerlink declaraion is mistake