Angular 2在實例化子組件之前解析根組件

Question

當我刷新我的web-app時，我希望它在實例化任何組件或路由之前請求潛在的用戶數據登錄。 如果找到了用戶的數據，我想將其注入到服務中，這是我所有其他子組件依賴的服務。

場景：假設我有3個組件，應用程序（ROOT），主頁&關於。 如果我把這段代碼放到我的關於組件中，我希望它在實例化之前等待20秒，相反，組件會立即實例化，只有當我離開這個組件時，它會觸發該函數，我等待20秒到達主頁。

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
    return new Promise((res, rej) => { 
     setTimeout(function() { 
      res(true); 
     }, 20000) 
    }) 
} 

理想我不想決心連接到任何路線，我想請求中的根組件決心之前，我甚至實例的任何路由。

Answer 1

實際上有兩種方法可以做到這一點。

1）您可以擴展Router-Outlet類，對於每個活動組件，您可以等待20秒，並輕鬆處理singedIn用戶數據（兩者都可以在單個文件或單個位置處理）。

2）或者在單個組件中，您可以使用@CanActivate鉤子並等待20秒，當某個組件激活時，您可以將shareService（可能包含用戶信息對象）注入構造函數並執行更多操作。

爲此，您可以在組件中使用@CanActivate，並在啓動之前等待20秒。

如果我在關於組件把這個代碼，我希望它等待 20秒之前實例化，相反，組件獲得 立即實例化......

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => { 
    return new Promise((res, rej) => { 
     setTimeout(function() { 
      res(true); 
     }, 20000) 
    }) 
})