Angular2路由器和一个路由

多解决了UI的路由器其容易使在路由配置中定义多个议决，所以让我们这样说：Angular2路由器和一个路由

export const APP_STATES: Ng2StateDeclaration[] = [ 
    { 
    name: 'dashboard', 
    url: '/dashboard', 
    component: DashboardComponent, 
    resolve: [ 
     { 
     token: 'playbookDurations', 
     deps: [DashboardService], 
     resolveFn: (svc: DashboardService) => svc.getPlaybookDurations() 
     }, 
     { 
     token: 'playbookSuccesses', 
     deps: [DashboardService], 
     resolveFn: (svc: DashboardService) => svc.getPlaybookSuccesses() 
     }, 
     { 
     token: 'playbookRuns', 
     deps: [DashboardService], 
     resolveFn: (svc: DashboardService) => svc.getPlaybookRuns() 
     }, 
     { 
     token: 'activityLog', 
     deps: [DashboardService], 
     resolveFn: (svc: DashboardService) => svc.getActivityLog() 
     } 
    ] 
    } 
}];

使用Angular2路由器时，是需要你为resolve参数实现解析器模式。因此，像这样：

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { DashboardService } from '.'; 

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

    constructor(private dashboardService: DashboardService) { } 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    return this.dashboardService.get(); 
    } 

}

然后在我的路线我做这样的事情：

import { DashboardComponent } from './dashboard.component'; 
import { DashboardResolver } from './dashboard.resolver'; 

export const routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: '', 
     component: DashboardComponent, 
     resolve: { 
      data: DashboardResolver 
     } 
     } 
    ] 
    } 
];

问题是只有一个决心。如何实现像ui-router实现那样的多个解析参数？

我想你有2个选择;为每个输入实现解析器，或者让解析返回一个对象，其中所有解析都是嵌套的。第一个看起来很有礼貌，第二个听起来很不好，所以必须有更好的方法。

来源

2017-01-09 amcdnl

你可以在angular2 BTW中继续使用UIRouter :)，我这样做。 –

是的，我知道。我只是在试验; P – amcdnl

@amcdnl。你还需要帮助吗？ – AngularChef

好吧，我希望我没有误解这个问题。

Angular的路由器支持每个路由尽可能多的解析器。

在路径声明中，resolve属性是一个对象，它可以有许多的按键，只要你愿意：

@Component({ ... }) 
export class MyComponent { 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    const foo = this.route.snapshot.data['foo']; 
    const bar = this.route.snapshot.data['bar']; 
    } 

}

：

{ 
    path: '', 
    component: DashboardComponent, 
    resolve: { 
    foo: Resolver1 
    bar: Resolver2, 
    // more resolves here... 
    } 
}

然后从组件检索数据解析

在所有解析完成/完成之前，路线不会被激活。

来源

2017-03-02 19:25:35 AngularChef

所以这是很好的知道，但我不认为它完全回答了他的整个问题。我们是否需要为每条路线中的每个解决方案创建x个可注入的解析器类，或者我们如何才能在路由激活之前创建一个可以进行多个服务调用的解析器？ – Marcidius

这是一个设计选择，它取决于你。一个庞大的解析器会使其不易重用。除非你的解析器被绑定到一个特定的路线，否则我认为编写多个灵活的解析器是更好的方法。 – AngularChef

你好，有可能得到一个根对象与一些嵌套的对象？我想用嵌套对象而不是许多解析器来获得一个对象。 – tylkonachwile

Angular2路由器和一个路由

回答

相关问题