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路由器和一個路由

回答

相關問題