在浏览器中使用cordova插件时，我更喜欢做一些不同的事情。Network即使您的方法效果很好，您仍然需要手动告诉 Angular 当它在某些组件的构造函数中看到参数时应该使用哪个类。您在这一行中执行此操作：
{ provide: Network, useClass: NetworkMock }
因此，如果您想在移动设备上运行该应用程序，您需要手动更改该行（以及与其他一些 cordova 插件相关的所有行）。
这就是为什么我喜欢使用工厂提供程序。这就是我Network在浏览器中使用cordova插件的方式：
// ------------------------------------------------------------
// File: /providers/cordova-plugins/network/network.provider.ts
// ------------------------------------------------------------
// Ionic
import { Platform } from 'ionic-angular';
// Ionic native
// http://ionicframework.com/docs/v2/native/network/
import { Network } from '@ionic-native/network';
// Browser implementation
export class BrowserNetworkProvider extends Network {
public get type(): string {
return this.isOnline() ? 'wify' : 'none';
}
private isOnline(): boolean {
return navigator.onLine;
}
}
// Mobile implementation
// Is empty in this case since I don't to override anything, but in
// some other plugins, I like to add some console.log() before calling
// the methods in the plugin (by using super.nameOfTheMethod();)
export class MobileNetworkProvider extends Network {}
// ------------------------------------------------------------
// Network factory
// parameters: dependencies of the target service
// returns: instance of the service (for real devices or the browser)
// ------------------------------------------------------------
export function networkFactory(platform: Platform) {
return platform.is('cordova') ? new MobileNetworkProvider() : new BrowserNetworkProvider();
}
// networkProvider: used to import the service in the NgModule declaration
export let networkProvider =
{
provide: Network,
useFactory: networkFactory,
deps: [Platform]
};
然后在app.module.ts文件中：
import { networkProvider } from '../providers/plugins/network/network.provider';
@NgModule({
declarations: [
MyApp,
//...
],
imports: [
// ...
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// Cordova plugins
networkProvider, // <- I'm using our custom provider here! :)
// ...
]
})
export class AppModule { }
如您所见，Angular 将使用这些信息来了解应该在我们的应用程序中使用Platform哪个类的扩展。Network
正如我们在评论中谈到的：
1）关于覆盖type属性的getter，我不太了解Typescript，但由于某种原因，我无法在扩展类时设置属性的值（这就是我建议使用getter的原因）。由于 getter 就像它是一个属性一样被调用，所以我想这样做并且似乎正在工作！
2）为什么要Network为浏览器扩展类，当我们也可以使用与类无关的Network类时（比如当您在示例中省略extend关键字时？好吧，您可以这样做，因为毕竟这只是 Javascript （并且您可以使用强制转换修复任何 Typescript 抱怨(<any>propertyName)。但是既然您告诉 AngularNetwork应该使用该类的哪个实现，为什么不扩展该类，覆盖我们想要更改的内容，但保持一切一致？如果稍后插件添加一些适用于浏览器的方法，您无需更改任何内容，因为您已经在为所有未覆盖的方法使用插件的实际实现。