我在哪裏加載Angular2中的路由數據

在Angular 1中我會加載http數據（用戶配置文件等）。在我看來，這是決心的目的。現在我沒有明確的地方去做，但有很多選擇。我在哪裏加載Angular2中的路由數據

@CanActivate()好像它可以工作...但它返回一個boolean並且名稱很明顯這是http請求的錯誤位置。

ngOnInit很好 - 但它是在組件構造函數之後運行的。這意味着我不能對構造函數中的用戶數據做任何事情，比如將其綁定到成員變量或任何東西。當然，我也可以在ngOnInit中做到這一點，但是看起來它不應該在構造函數中使用？

constructor()然後是一個明顯的候選人。但是http請求可能會很長，而且他們自己似乎實際上並沒有任何關係構建組件。

我認爲它應該更像：

gatherData() -> constructor() -> ngOnInit()

我怎樣才能做到這一點？

來源

2016-03-04 Dylan Harness

您應該使用constructor()來設置依賴注入，而不是其他的。 ngOnInit()是「開始」的好地方 - 它是解析組件綁定的地方/位置，因此您可以使用從父組件傳遞的數據。對於路由中使用的組件，您也有routerOnActivate()。這裏的生命週期掛鉤的簡單例子路由組件：

@RouteConfig([ 
    { path: '/test', name: 'Test', component: Dummy }, 
]) 
class Main {} 

@Component({ template: `` }) 
export class Dummy { 
    constructor() { console.log("Dummy: constructor"); } 
    ngOnInit() { console.log("Dummy: ngOnInit"); } 
    ngAfterContentInit() { console.log("Dummy: ngAfterContentInit"); } 
    ngAfterViewInit() { console.log("Dummy: ngAfterViewInit"); } 
    ngOnDestroy() { console.log("Dummy: ngOnDestroy"); } 
    routerOnActivate() { console.log("Dummy: routerOnActivate"); } 
    routerOnDeactivate() { console.log("Dummy: routerOnDeactivate"); } 
} 

// output: 
Dummy: constructor 
Dummy: routerOnActivate 
Dummy: ngOnInit 
Dummy: ngAfterContentInit 
Dummy: ngAfterViewInit 
.... 
Dummy: routerOnDeactivate 
Dummy: ngOnDestroy

取決於你需要什麼，你可以撥打服務和設置訂閱任何一個掛鉤。如果您需要路由器數據使用routerOnActivate()，如果您需要輸入綁定使用ngOnInit() etc ...

來源

2016-03-05 00:16:50 Sasxa

我在哪裏加載Angular2中的路由數據

回答

相關問題