Angular 4共享組件在每個負載上創建新實例

我使用Core UI作爲儀表板模板，但只做了一些修改。該模板分爲幾個模塊，但sidebar菜單足以使其工作。因爲我的應用程序有點大，所以我使用頂層菜單進行導航，sidebar菜單根據模塊而改變。我遇到的問題是，每次切換模塊時都會實例化麪包屑組件，最終如果不是更多，最終可以結束+50個實例。Angular 4共享組件在每個負載上創建新實例

應用程序模塊如下所示：

// App component 
@Component({ 
    selector: 'body', 
    template: `<router-outlet></router-outlet>` 
}) 
export class AppComponent { 
} 

// App routing 
@NgModule({ 
    imports: [RouterModule.forRoot([ 
    { 
     path: '', 
     redirectTo: 'Dashboard', 
     pathMatch: 'full' 
    }, 
    { 
     path: '', 
     component: LayoutComponent, 
     children: [ 
      { 
       path: 'Dashboard', 
       loadChildren: './dashboard/dashboard.module#DashboardModule' 
      } 
     ] 
    } 
])], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { 
} 

// App module 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     CoreModule, 
     SharedModule, 
     AppRoutingModule 
    ], 
    declarations: [ 
     AppComponent, 
     LAYOUT_DECLARATIONS 
    ], 
    providers: [ 
     { 
      provide: LocationStrategy, 
      useClass: HashLocationStrategy 
     } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

// Layout component template 
<header class="app-header navbar"> 
    <button appMobileSidebarToggler class="d-lg-none navbar-toggler" type="button">&#9776;</button> 
    <a class="navbar-brand" href="#"></a> 
    <ul class="d-md-down-none nav navbar-nav"> 
     <li class="nav-item"> 
      <a appSidebarToggler class="navbar-toggler nav-link" href="#">&#9776;</a> 
     </li> 
     <li class="nav-item px-3"> 
      <a class="nav-link" i18n routerLink="/Dashboard" routerLinkActive="active">Dashboard</a> 
     </li> 
    </ul> 
</header> 
<div class="app-body"> 
    <router-outlet></router-outlet> 
</div>

的儀表板代碼：

// Dashboard component 
@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html' 
}) 

export class DashboardComponent { 
} 

// Dashboard routes 
@NgModule({ 
    imports: [ 
     RouterModule.forChild(Routes = [ 
    { 
     path: '', 
     component: DashboadComponent, 
     data: { 
      title: 'Dashboad' 
     }, 
     children: [ 
      { 
       path: '', 
       component: DashboardHomeComponent, 
       data: { 
        title: 'Home' 
       } 
      } 
     ] 
    } 
];) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class DashboardRoutingModule { 
} 

// Dashboard module 
@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     SharedModule, 
     DashboardRoutingModule 
    ], 
    declarations: [ 
     DashboadComponent, 
     DashboardHomeComponent 
    ] 
}) 
export class DashboadModule { 
} 

//Dashboard layout 
<div class="sidebar"> 
    <nav class="sidebar-nav"> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <!-- Module navigation --> 
      </li> 
     </ul> 
    </nav> 
</div> 
<main class="main"> 
    <ol class="breadcrumb"> 
     <app-breadcrumbs></app-breadcrumbs> 
    </ol> 
    <div class="container-fluid"> 
     <router-outlet></router-outlet> 
    </div> 
</main>

我省略了進口，因爲一切編譯OK。佈局模板中的頂層菜單將多出4個鏈接，並且每次用戶切換模塊時，都會創建breadcrumb組件的新實例，因爲麪包屑組件位於shared模塊中。有什麼方法可以將breadcrumb組件從佈局模板轉換到儀表板模板？或者解決這個問題的其他解決方案？

來源

2017-05-08 GregoryHouseMD

我有點困惑。你是說它的行爲不正確，還是你說這只是一個效率問題？ –

效率問題。我是Angular 4的新手，但我認爲每次加載新功能模塊時都應該創建一個新實例。 – GregoryHouseMD

也許不是，但我不擔心它，除非您發現內存_leak_。 –

Breadcrumb組件位於子模塊中，它應該位於父模塊中。

來源

2017-11-05 22:38:17 GregoryHouseMD

Angular 4共享組件在每個負載上創建新實例

回答

相關問題