Question

我使用Core UI作为信息中心模板，但稍作修改。模板分为模块，但sidebar菜单足以使其工作。因为我的应用程序有点大，我使用顶部菜单进行导航，sidebar菜单会根据模块进行更改。我遇到的问题是每次切换模块时都会对breadcrumb组件进行实例化，最后如果不是更多，最终会得到+50个实例。

App模块如下所示：

// 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>

我省略了导入，因为一切都编译好了。布局模板中的顶部菜单将包含4个以上的链接，每次用户切换模块时，都会创建breadcrumb组件的新实例，因为痕迹导航组件位于shared模块中。有没有办法将breadcrumb组件从布局模板转换为仪表板模板？或者这个问题的任何其他解决方案？

Answer 1

Breadcrumb组件位于子模块中，它应该位于父模块中。

Angular 4共享组件在每次加载时创建新实例

1 个答案: