从外部类创建可注入服务

时间:2017-08-22 08:31:03

标签: angular

我有一个公开类HtMapClass的库。它在构造过程中需要mapType作为字符串。

class HtMapClass{
  constructor(mapType: string) {}
  initMap(id: string) {}
}

我想创建一个角度包装模块,让我们说HtModule,可以在角度应用中导入,这会暴露类HtMapClass

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HtModule.forRoot({mapType: 'google'})
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在使用HtMapClass作为服务。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(
    public mapService: HtMapService
  ) {

  }

  ngOnInit() {
    console.log(this.mapService);
    this.mapService.initMap('map') //this is not working
  }
}

为实现这一目标,我在下面创建了HtModule

export let MAP_TYPE = new InjectionToken<HtMapType>('app.mapType');

export function mapServiceFactory (mapType: HtMapType = 'google') {
  return new HtMapClass(mapType);
}

export function  forRoot (config): ModuleWithProviders {
  return {
    ngModule: HtModule,
    providers: [
      HttpClient,
      { provide: 'MAP_TYPE', useValue: config.mapType },
      {provide: HtMapService, useFactory: mapServiceFactory, deps: ['MAP_TYPE']}
    ]
  };
};

@NgModule({
  imports: [HttpClientModule]
})
export class HtModule {
  static forRoot = forRoot;
}

HtMapService类看起来像这样

import {Injectable} from "@angular/core";
import { HtMapClass, HtMapType } from "ht-js-map";

@Injectable()
export class HtMapService extends HtMapClass {
  test() {
    return "";
  }
}

现在,当我导入HtModule并注入HtMapService时,只有this.mapService.test()可用。我无法访问HtMapClass类中的其他方法。 this.mapService.initMap('map')无法处理错误Property 'initMap' does not exist on type 'HtMapService'

ht-js-map是用打字稿编写的 我怎样才能解决这个问题。提前致谢

0 个答案:

没有答案