javascript - 更新到RC5后注入(inject)错误

Question

启动应用程序时出现以下错误:

Uncaught Can't resolve all parameters for UserView: (AppContext, ClientService, GraphApiService, FiggApiService, AgendaService, AttendeeService, ?, TagService, HelperService, ProgressIndicatorService, TemplateService, MeetingTemplateService, InfiniteLoaderService)

以下是我的 maint.ts 文件，它负责应用程序的引导:

import { enableProdMode, NgModule, ApplicationRef, provide, ExceptionHandler } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { Http, XHRBackend, RequestOptions, HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { routing } from './app/app.routing';
import * as pages from './app';
import * as components from './app/shared/components';
import * as directives from './app/shared/directives';
import * as pipes from './app/shared/pipes';
import * as services from './app/shared/services';
import * as models from './app/shared/models';

declare var Office: any;

// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
}

var appContext = new models.AppContext();
var clientService: services.IClientService

//Office based init
if (!(!this.Office)) {
    Office.initialize = (reason: any) => {
        if (!Office.context.document) {
            clientService = new services.OutlookClientService();
            clientService.initializeContext(appContext)
                .subscribe((res: any) => {
                    console.log(('Booting using OutlookClientService'));
                    services.Trace.write('Booting using OutlookClientService');
                    boot();
                }, (error: any) => console.error(error));
        }
        else {
            clientService = new services.OfficeClientService();
            clientService.initializeContext(appContext)
                .subscribe((res: any) => {
                    console.log('Booting using OfficeClientService');
                    services.Trace.write('Booting using OfficeClientService');
                    boot();
                }, (error: any) => console.error(error));
        }
    };
}
else {
    //Browser based init
    clientService = new services.BrowserClientService();
    clientService.initializeContext(appContext)
        .subscribe((res: any) => {
          console.log('Booting using BrowserClientService');
            services.Trace.write('Booting using BrowserClientService');
            boot();
        }, (error: any) => console.error(error));
}

@NgModule({
  imports: [
    BrowserModule,
    HttpModule, 
    RouterModule,
    routing
  ],
  declarations: [
      pages.AppComponent,
      pages.UserView
      pipes.OrderBy
  ],
  providers: [
    provide(Http, {
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: services.HelperService, authProvider: models.AuthProvider) => 
            new services.CustomHttp(backend, defaultOptions, helperService, authProvider),
        deps: [XHRBackend, RequestOptions, services.HelperService, models.AuthProvider]
    }),
    provide(LocationStrategy, { useClass: HashLocationStrategy }), // can be switched to HashLocationStrategy if you cannot configure your server appropriately for URL rewriting
    provide(ExceptionHandler, { useClass: models.FiggExceptionHandler}),
    provide("GraphApiService", { useClass: services.GraphApiService }),
    provide("AppContext", { useValue: appContext }),
    provide("ClientService", { useValue: clientService }),
    services.AgendaService,
    services.AttendeeService
  ],
  bootstrap: [pages.AppComponent]
})
export class AppModule {
  constructor(public appRef: ApplicationRef) {}

}

export function main() {
  return platformBrowserDynamic().bootstrapModule(AppModule);
}

export function boot(){
  if (document.readyState === 'complete') {
    main();
  } else {
    document.addEventListener('DOMContentLoaded', main);
  }
}

相关组件UserView的构造函数:

constructor( @Inject("AppContext") private context: AppContext,
    @Inject("ClientService") private clientService: IClientService,
    @Inject("GraphApiService") private graphService: IApiService,
    private figgApiService: FiggApiService,
    private agendaService: AgendaService,
    private attendeeService: AttendeeService,
    private routeParams: Params,
    private tagService: TagService,
    private helperService: HelperService,
    private progressIndicatorService: ProgressIndicatorService,
    private templateService: TemplateService,
    private meetingTemplateService: MeetingTemplateService,
    private loaderService: InfiniteLoaderService){ }

我最好的猜测是，我在 providers: [...] 中提供的服务未得到解析，因此在路由到该组件时无法实例化它们的实例。但问题是为什么参数之间会有 ? 标记？这是什么意思？

Answer 1

RC.5 中不再有 RouteParams。

注入(inject) ActivatedRoute 并获取如下参数

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     this.service.getHero(id).then(hero => this.hero = hero);
   });
}

或与

this.route.snapshot.params['id'];

另请参阅https://angular.io/docs/ts/latest/guide/router.html