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共享组件在每个负载上创建新实例

回答

相关问题