Question

我遇到以下问题，不知道如何解决。通常，我在Angular 6中工作，但是回到AngularJS一段时间，我认为DI会有一些问题。

我有带打字稿的组件体系结构。

我的appRootModule看起来像这样（不包括导入部分）

export const appRootModule: IModule = module('testApp, ['asyncFilter'])
  .component('appRoot', new AppRootComponent())
  .component('postModal', new PostModalComponent())
  .service('componentsDataService', ComponentDataService);

这就是提供错误的服务。

appRootController：

export class AppRootController implements IController 
  private $http: IHttpService;
  private $cds: ComponentDataService;

  constructor($http: IHttpService, $cds: ComponentDataService) {
    this.$http = $http;
    this.$cds = $cds;
    /.../
  }

  public sendToModal(post: any): void {
    this.$cds.sendModalData(post);
  }
  public $onInit = async (): Promise<void> => {};
}

以及服务文件：

import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

export class ComponentDataService {
  private modalSubject: Subject<any> = new Subject<any>();

  public sendModalData(post: any): void {
    /.../
  }

  public clearModalData(): void {
    /.../
  }

  public getModalData(): Observable<any> {
    return this.modalSubject.asObservable();
  }
}

请帮助。我要哭了。

它给了我：

[$injector:unpr] Unknown provider: $cdsProvider <- $cds

Answer 1

当TypeScript将您的代码转换为javascript时，它将剥离类型，最终得到类似

var AppRootController = (function() { 
    function AppRootController($http, $cds) { /.../ } 
});

AngularJS找不到$cds，并且您收到了所看到的错误。您需要使用分配给服务的名称：componentsDataService。即：

export class AppRootController implements IController 
  private $http: IHttpService;
  private $cds: ComponentDataService;

  constructor($http: IHttpService, componentsDataService: ComponentDataService) {
    this.$http = $http;
    this.$cds = componentsDataService;
    /.../
  }

  public sendToModal(post: any): void {
    this.$cds.sendModalData(post);
  }
  public $onInit = async (): Promise<void> => {};
}

AngularJS，TypeScript，组件体系结构[$ injector：unpr]未知的提供程序

1 个答案: