Angular 2/4：与延迟加载的模块及其组件共享组件

Question

仪表板组件是全局组件。 users模块是延迟加载的，其中包含登录组件。我想在延迟加载的登录组件中访问此仪表板组件。我该如何实现？我知道我们可以使用共享模块。但是，我不确定如何完全实现它。请指导我。

Dashboard.componenet.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <p-menu [model]="menuItems"></p-menu>
    </div>
    <div class="col-md-9">

    </div>
  </div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

//PrimeNG
import { MenuModule } from 'primeng/primeng';

//components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const appRoutes = [
  { path: '', component: DashboardComponent },
  { path: 'users', loadChildren: 'app/users/users.module#UsersModule'}
]

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    MenuModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports:[DashboardComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

users.module.ts

//Interfaces
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

//Components
import { LoginComponent } from './login/login.component';

const lazyRoutes = [
    {path:'login/login', component: LoginComponent}
]

@NgModule({
    declarations:[
        LoginComponent
        // DashboardComponent
    ],
    imports: [
        // AppModule,
        RouterModule.forChild(lazyRoutes)
    ],
    exports:[],
    providers: []
})

export class UsersModule {}

login.component.html

<dashboard></dashboard>[enter image description here][1]

Answer 1

在我的代码中，我有一个＆＃34; Shell＆＃34;组件在概念上与您的仪表板类似。它看起来像这样：

shell组件

<mh-menu></mh-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

<mh-menu>是包含菜单的组件。菜单下方是路由器插座。然后，我可以将我的任何内容路由到该路由器插座，使其显示在菜单下方，每个页面上都会显示菜单。

在我的示例中，我的产品是一个延迟加载的模块，但我能够将产品编辑页面路由到此主路由器插座。所以延迟加载的组件出现在菜单中。

这是一张图片：

我在这里有一个完整的例子：https://github.com/DeborahK/MovieHunter-routing（虽然它的电影而不是产品）