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

【问题标题】：Angular route not resolving from observable角度路线无法从可观察到的解决
【发布时间】：2017-06-06 13:33:09
【问题描述】：

我正在尝试解析 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;
        }
    });
}
}

谁能给点建议？如果我删除解析器，路线工作正常。这是一个让我发疯的愚蠢问题。

【问题讨论】：

对我来说，您的第二个代码块似乎与您的问题无关。您如何以及从何处尝试导航到 sortation 路线？
您好，感谢您的反馈。第二个代码块是我的解析器，它返回一个对象或布尔值 false。我通过网页上的一个简单按钮调用路线。我已经更新了问题。
我明白了。因此，没有解析的是解析器，而不是路由。当路由器找不到匹配的路由时，也会出现类似的错误。从这里很难说出为什么它没有解决。第一步是添加一些调试输出以查看执行的代码路径以及导致此代码路径的值。

标签： angular

【解决方案1】：

对于任何苦苦挣扎的人来说，这个问题是由于没有关闭 observable 引起的。我在解析器中修改了我的代码如下：

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();”在关闭可观察对象并允许渲染路由的方法的末尾。

感谢您的帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的反馈。我发现了这个问题并在上面详细说明。