2016-11-28 57 views
3

在我的角2的應用程序加載,我試圖重現此導航結構:問題與角2路由:功能模塊沒有在正確的地方

enter image description here

我在一個大的出口路由器我的根應用程序組件,其中我要麼加載我的營銷網站,要麼我的應用程序在用戶登錄時。 因此,一旦用戶登錄MyComponent(在褐色)被加載到紅色路由器插座,它有一個導航(MyHeader,黑色和灰色)和自己的路由器插座(藍色)。當我在導航欄中單擊Home時,它會將儀表板組件加載到藍色路由器插座中,並且一切都很正常。但是當我點擊好處鏈接時,我希望它將BenefitsModuleBenefitsComponent(橙色和黃色)加載到藍色路由器插座中。但相反,它似乎將其加載到紅色路由器插座中,而不是從AppComponent中取出,因爲從MyComponent導航欄消失。

我已創建simplified version of my project on Github

顯然我缺少一些東西。任何人都可以幫我弄清楚發生了什麼?

編輯:只是要添加一些上下文,我試圖修改我的路由結構從懶加載福利模塊。最初我懶加載每個模塊,但它不是真的很有用,因爲好處部分應該加載我的應用程序的登錄部分。本來,我有這個懶加載:

  • my.module.ts我沒有提到的BenefitsModule因爲它是延遲加載
  • my-routing.module.ts我有一個附加行加載模塊:

    {路徑: '好處',loadChildren: '應用程序/我的/收益/ benefits.module#BenefitsModule',canActivateChild:[AuthGuard]}

  • benefits-routing.module.ts我沒有提及benefits p的ath因爲它存在於my-routing.module.ts

而且這個工作完美。正如你可以在the lazy-loading branch of my repository中看到的那樣。所以我想我的問題是如何從這個懶加載的情況下,到一個熱切的加載情況,而不會丟失我的導航結構。

編輯2:在每個路由器出口採用activate事件,我只是確認,使用延遲加載的時候,我的好處組件加載到MyComponent的,但沒有延遲加載路由器的出口,它被加載到根AppComponent路由器出口。

回答

3

所以我調查了你的問題。問題是你想BenefitsComponent加載MyComponent。但是如果他不是MyComponent的孩子,他怎麼能這樣做呢?所以爲了解決這個問題,你需要像延遲加載一樣將它添加到子列表中。唯一的是,你不想在這裏延遲加載。但是,由於路由器的RC6(也是版本),你可以傳遞一個返回模塊的函數。這使得切換到延遲加載也非常簡單,只需刪除導入並使用字符串文字指向模塊。

我在您的GitHub存儲庫中添加了一個PR,以向您展示它是如何工作的。 https://github.com/sarbogast/ng2-routing-example/pull/1