角度2/4：与延迟加载的模块及其组件共享一个组件

Question

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

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

在我的代码中，我有一个“外壳”组件，其概念与您的仪表板相似。 看起来像这样：

外壳组件

<mh-menu></mh-menu>

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

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

在我的示例中，我的产品是一个延迟加载的模块，但是我仍然可以将产品编辑页面路由到该主要路由器出口。 因此，延迟加载的组件随菜单一起出现。

这是一张图片：

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