Angular5延迟加载模块:提供者范围

时间:2018-02-01 15:27:18

标签: angular lazy-loading angular5

我有一个带有提供者的模块(Project overview中的通知者)。我正在尝试从延迟加载的模块中使用此提供程序(在Project overview中延迟)并且它不起作用。

有什么建议吗?

非常感谢!

Project overviewsource code

环境详情

    Angular CLI: 1.6.5
    Node: 9.5.0
    OS: linux x64
    Angular: 5.2.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    @angular/cli: 1.6.5
    @angular/tsc-wrapped: 4.4.6
    @angular-devkit/build-optimizer: 0.0.42
    @angular-devkit/core: 0.0.29
    @angular-devkit/schematics: 0.0.52
    @ngtools/json-schema: 1.1.0
    @ngtools/webpack: 1.9.5
    @schematics/angular: 0.1.17
    typescript: 2.4.2
    webpack: 3.10.0

notificator.module.ts

我宣布NotificatorDataService为提供者

    @NgModule({
      imports: [      
        // angular modules
        CommonModule, 
        FormsModule,
        // primeng
        GrowlModule
      ],
      declarations: [ 
        NotificatorComponent
      ],
      providers: [    
        NotificatorDataService
      ],
      exports: [      
        NotificatorComponent, 
      ]
    })
    export class NotificatorModule { }

app.module.ts

我只是导入NotificatorModule

    @NgModule({
      declarations: [
        AppComponent,
        DashboardComponent
      ],
      imports: [
        BrowserModule, 
        BrowserAnimationsModule,
        FormsModule,   
        HttpClientModule,

        RouterModule.forRoot(APP_ROUTES),

        NotificatorModule,
      ],
      providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.routes.ts

我懒加载LazyModule

    export const APP_ROUTES: Routes = [
      { 
        path: '', pathMatch: 'full', 
        redirectTo: 'dashboard' 
      },
      { 
        path: 'dashboard', pathMatch: 'full', 
        component: DashboardComponent
      },
      {
        path: 'lazy',
        loadChildren: './lazy/lazy.module#LazyModule'
      }
    ];

lazy.module.ts

我只是导入NotificatorModule

    @NgModule({
      imports: [     
        // angular modules
        CommonModule, 
        FormsModule,  

        // Custom
        NotificatorModule,

        // Routes
        RouterModule.forChild(SUBJECTS_ROUTES),
      ],
      declarations: [ 
        LazyComponent,
      ],
      providers: [],
      exports: []
    })
    export class LazyModule { }

lazy.component.ts

    @Component({
        selector: 'subjects',
        template: `<p>LAZY MODULE</p>
                   <button (click)="notify($event)">Notify</button>`
    })
    export class LazyComponent {

      constructor(private _notificatorDataService: NotificatorDataService) { }

      public notify() {
        this._notificatorDataService.showSuccess('LAZY MODULE NOTIFICATION');
      }
    }

0 个答案:

没有答案