Question

这就是我的app.module的样子：

 @NgModule({
    imports:[BrowserModule,HttpModule,SharedModule.forRoot(),NavigationBarModule,routing,JsonpModule],
    declarations: [RootComponent],
    providers:[PopupManager],
    bootstrap: [RootComponent]
})
export class AppModule { }

这是我的共享模块的外观：

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule,RouterModule,LoaderComponent],
  declarations:[LoaderComponent]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ AccountValues,PopupManager,Preferences,TimeFormatter,UserDataProvider],
    };
  }
 }

这就是我的PopupManager的样子：

@Injectable()
export class PopupManager{
    private activePopUpComp: HasAPopUp;

    constructor(){
        console.log("PopupManager created");
    }
}

这是我的RootComponent的样子：

@Component({
    selector : 'root',
    templateUrl : 'Content/Angular2/Development/partials/root.html',
    styleUrls:['Content/Angular2/Development/css/CommonStyle.css']
})

export class RootComponent{
    constructor(private popUpManager:PopupManager){

    }
    handleClick():void{
        this.popUpManager.setActivePopUpComponent(undefined);
    }
}

PopupManager由Shared模块提供，但由于某种原因，当我运行此代码时，它没有提供PopupManager的提供程序！虽然我已明确表示要提供PopupManager，但它仍然无法正常工作。我也尝试过这样创建共享模块：

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule,RouterModule,LoaderComponent],
  providers: [ AccountValues,PopupManager,Preferences,TimeFormatter,UserDataProvider],
  declarations:[LoaderComponent]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
    };
  }
 }

我仍然得到同样的错误。我认为这是一个错误，其中引导组件不能与任何提供者一起注入。我的意思是说RootComponent是在创建提供者之前创建的。所以，如果它不是一个错误我哪里可能出错？

我正在使用Angular2的rc6。

Answer 1

我认为您应该在静态forRoot（）的 SharedModule 下/内使用提供商，如下所示。我希望这能解决你的问题。

@NgModule({
  imports:      [ CommonModule,.. ],
  declarations: [LoaderComponent],
  exports:      [ CommonModule,... ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [  ...,PopupManager,...]  //<-----declare providers here
    };
  }
}

没有Bootstrap组件的提供者

1 个答案: