Angular 2:如何在解决问题上获得参数

时间:2017-01-04 05:17:27

标签: angular angular2-routing

Routs策略:

export const routes = [
{
    path       : 'rto-activation/:id',
    component  : RtoActivationComponent,
    resolve  : {
        'singleRto': SingleRtoResolve
    },
    children   : [
        {path: 'start', component: ActivationStartComponent},
        {path: 'warning', component: WarningComponent},
        {path: 'confirm', component: ConfirmRtoDetailsComponent},
        {path: 'ldWaiver', component: LDWaiverComponent},
        {path: 'payment-schedule', component: PaymentScheduleComponent},
        {path: 'user-reference', component: ReferenceComponent}

    ]
}

SingleRtoResolve:

constructor(private router: Router,
            private route: ActivatedRoute) {
}

resolve() {
    var self = this;
    return new Promise((resolve, reject) => {
        self.subscription = self.route.params.subscribe(
            (param: any) => {
                let id = param[ 'id' ];
               self.rtoService.getRto(null, +id)
                .then((res: any) => {
                    resolve(res)
                })

            });
    });
    }

我知道:我们通常从ActivatedRoute服务获得参数。

问题:我可以从路由器服务获得params。

简介:尝试在Resolve Injectable上获取路线参数,因为在该阶段路线未激活且我无法获得参数。

用例:当用户使用某些(:id)打开任何子路由(隐含和显式)时,应该在父路由中解析数据。

在任何子组件中激活路由时,成功获取Params:

ngOnInit() {
let self          = this;
this.subscription = this.route.params.subscribe(
    (param: any) => {
        let id = param[ 'id' ];
        self.rtoService.getRto(null, +id)
            .then((res: any) => {

            })

    });
}

2 个答案:

答案 0 :(得分:8)

SingleRtoResolve implements Resolve<T>应该RtoService。然后,您只需要constructor() {}中的数据服务(Router我猜)。由于您的ActivatedRoute将获得resolve()ActivatedRouteSnapshot,因此无需RouterStateSnapshotresolve()。 所以 resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Promise<any> { return ... } 看起来像那样:

route.params['id']

..您可以使用for d in direct: for l in d['legs']: print l['duration'] print l['distance'] 来获取您的身份。

修改:您还可以查看 Resolve

的文档

答案 1 :(得分:0)

我们需要通过解析器方法而不是构造函数传递依赖项

  resolve(route: ActivatedRouteSnapshot) {

    console.log(route.params);// you can see the log and use it

    return this.apiService.getItems(route.params.params1).catch(() => {
       return Observable.empty();
    });
  }