角度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 （盡管它的電影而不是產品）