充分了解具有惰性路由的Route中的RouterOutlet

Question

App.module.ts

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import 'hammerjs';


import { AppComponent } from './app.component';

/* Modules */
import { SharedModule } from './shared/shared-module.module';
import { UiInterfacesRoutingModule } from "./modules/ui-interfaces/ui-interfaces-routing.module";

import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
import {UiInterfacesModule} from "./modules/ui-interfaces/ui-interfaces.module";
import {CommonModule} from "@angular/common";
import {ModalComponent} from "./shared/modal/modal.component";
import {SidebarModalComponent} from "./shared/sidebar-modal/sidebar-modal.component";

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
    'swipe': {velocity: 0.4, threshold: 20} // override default settings
  }
}

const Modules = [
  BrowserModule,
  SharedModule,
  UiInterfacesModule,
  UiInterfacesRoutingModule
];

const ModulesForRoot = [
  NgbModule
];

const ModulesForRootImport = [
  NgbModule.forRoot(),
];

@NgModule({
  imports: [
    ...Modules,
    ...ModulesForRootImport
  ],
  declarations: [
    AppComponent,
    SidebarModalComponent,
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  exports: [
    ...ModulesForRoot,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

ui-interfaces.module.ts ，如果我们在app.modules.ts中声明SidebarModalComponent而不是出口侧边栏中的router-outlet工作。如果

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {SidebarModalComponent} from "../../shared/sidebar-modal/sidebar-modal.component";
import {SharedModule} from "../../shared/shared-module.module";

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'main',
        loadChildren: 'app/modules/ui-interfaces/main/main.module#MainModule',
      },
      {
        path: 'login',
        loadChildren: 'app/modules/ui-interfaces/login/login.module#LoginModule'
      },
      {
        path: 'editor',
        loadChildren: 'app/modules/ui-interfaces/editor/editor.module#EditorModule'
      },
      {
        path: '',
        loadChildren: 'app/modules/ui-interfaces/landing/landing.module#LandingModule'
      }
    ],
  },
  {
    path: 'inventory',
    component: SidebarModalComponent,
    loadChildren: 'app/modules/ui-interfaces/inventory/inventory.module#InventoryModule',
    outlet: 'sidebar'
  }
];

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forRoot(routes)
    // RouterModule.forRoot(routes, { enableTracing: true })
  ],
  exports: [RouterModule],
  providers: []
})
export class UiInterfacesRoutingModule { }

Shared.module.ts ，如果我们在这里声明了组件，那么组件中的router-outlet不起作用

import { NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { SelectModule } from 'angular2-select';

import { ApiService } from "../services/api.service";
import { SidebarModalComponent } from './sidebar-modal/sidebar-modal.component'
import {ModalComponent} from "./modal/modal.component";
import {provideComponentOutletModule} from "angular2-component-outlet";

const Modules = [
  CommonModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  SelectModule,
  NgbModule
];

const Services = [
  ApiService
];

const Components = [
  // SidebarModalComponent,
  // ModalComponent
];

@NgModule({
  imports: [
    ...Modules
  ],
  declarations: [
    ...Components
  ],
  providers: [
    ...Services,
    provideComponentOutletModule({
      imports: [CommonModule]
    })
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  exports: [
    ...Modules,
    ...Components
  ]
})
export class SharedModule { }