Cordova插件不工作
我正在尝试使用Cordova插件不工作,cordova,angular,typescript,ionic2,cordova-plugins,Cordova,Angular,Typescript,Ionic2,Cordova Plugins,我正在尝试使用Cordova插件:Cordova插件文件路径 import { FilePath } from '@ionic-native/file-path'; 在Corodva/Ionic(Android)应用程序上 我尝试使用与上述url相同的代码,我的意思是: window.FilePath.resolveNativePath('content://...', successCallback, errorCallback); 但我得到: [11:36:22] typescr
Cordova
插件:Cordova插件文件路径
import { FilePath } from '@ionic-native/file-path';
在Corodva
/Ionic
(Android
)应用程序上
我尝试使用与上述url相同的代码,我的意思是:
window.FilePath.resolveNativePath('content://...', successCallback, errorCallback);
但我得到:
[11:36:22] typescript: D:/ionic2/test-app/src/pages/home/home.ts, line: 27
Property 'FilePath' does not exist on type 'Window'.
L26: this._camera.getPicture( options ).then(( imageData ) => {
L27: this.cameraUrl = window.FilePath.resolveNativePath(imageData);
L28: this.photoSelected = true;
我是否必须以某种方式导入窗口
我正在使用此插件将文件的路径转换为:
content://com.android.providers.media.documents/document/...
致:
这是我的环境信息:
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed
以防万一,我在这里删除的代码是:home.ts
:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';
@Component( {
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
cameraData: string;
photoTaken: boolean;
cameraUrl: string;
photoSelected: boolean;
constructor( public navCtrl: NavController, private _DomSanitizationService: DomSanitizer, private _camera: Camera ) {
this.photoTaken = false;
}
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imageData ) => {
this.cameraUrl = window.FilePath.resolveNativePath(imageData);
this.photoSelected = true;
this.photoTaken = false;
}, ( err ) => {
// Handle error
});
}
openCamera() {
var options = {
sourceType: this._camera.PictureSourceType.CAMERA,
destinationType: this._camera.DestinationType.DATA_URL,
correctOrientation: true
};
this._camera.getPicture( options ).then(( imageData ) => {
this.cameraData = 'data:image/jpeg;base64,' + imageData;
this.photoTaken = true;
this.photoSelected = false;
}, ( err ) => {
// Handle error
});
}
}
你知道如何让这个插件工作吗
[编辑1]
我用以下方式修改了源代码:
import { FilePath } from '@ionic-native/file-path';
...
constructor(
public navCtrl: NavController,
private _DomSanitizationService: DomSanitizer,
private _camera: Camera,
private filePath: FilePath
) {
this.photoTaken = false;
}
...
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imagePath ) => {
this.filePath.resolveNativePath(imagePath).then(filePath => {
this.cameraUrl = filePath;
this.photoSelected = true;
this.photoTaken = false;
});
});
}
他还做了:
$ ionic plugin add cordova-plugin-filepath
但现在我得到了以下错误:
Runtime Error
Uncaught (in promise): Error: No provider for FilePath! Error at g (http://192.168.1.202:8100/build/polyfills.js:3:7133) at injectionError (http://192.168.1.202:8100/build/main.js:1511:86) at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12) at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19) at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25) at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25) at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52) at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45) at createClass (http://192.168.1.202:8100/build/main.js:11128:32) at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37) at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49) at createRootView (http://192.168.1.202:8100/build/main.js:12208:5) at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42) at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
Stack
Error: Uncaught (in promise): Error: No provider for FilePath!
Error
at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
at injectionError (http://192.168.1.202:8100/build/main.js:1511:86)
at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12)
at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19)
at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25)
at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25)
at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21)
at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52)
at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45)
at createClass (http://192.168.1.202:8100/build/main.js:11128:32)
at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37)
at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49)
at createRootView (http://192.168.1.202:8100/build/main.js:12208:5)
at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42)
at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
at l (http://192.168.1.202:8100/build/polyfills.js:3:6251)
at http://192.168.1.202:8100/build/polyfills.js:3:6805
at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15213)
at Object.onInvokeTask (http://192.168.1.202:8100/build/main.js:4415:37)
at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15134)
at n.runTask (http://192.168.1.202:8100/build/polyfills.js:3:10390)
at a (http://192.168.1.202:8100/build/polyfills.js:3:5313)
[编辑2]
在[EDIT 1]
顶部,我做了以下编辑:
@Component( {
selector: 'page-home',
templateUrl: 'home.html',
providers: [ FilePath ]
})
我这次没有收到错误,但是图像没有加载。我使用了一个文本区域来查看传递给图像的whatsrc
值
我还注意到,现在我得到了真正的路径(这很好)
也许现在是嵌入式webview
的权限问题。请检查此链接:
我想我越来越近了
这是我手机的屏幕截图
:
[编辑3]
我正在一台真正的Android
设备上使用以下命令运行:
$ ionic run android -l
首先,你应该遵循Ionic2文档中的用法,而不是plugin文档中的用法
在这里查看Ionic2文档
首先导入文件路径
import { FilePath } from '@ionic-native/file-path';
其次,将FilePath
添加到构造函数中
constructor(
public navCtrl: NavController,
private _DomSanitizationService: DomSanitizer,
private _camera: Camera,
private filePath: FilePath
) {
this.photoTaken = false;
}
然后在代码中这样使用它:
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imageData ) => {
//use this.filePath instead of window.FilePath
this.cameraUrl = this.filePath.resolveNativePath(imageData);
this.photoSelected = true;
this.photoTaken = false;
}, ( err ) => {
// Handle error
});
}
编辑:由于海报使用的是Ionic 3.0.1,因此需要添加一个提供程序,否则将导致无提供程序文件路径
错误
在@Component中添加提供程序,如下所示:
@Component({
...
providers: [ FilePath ],
...
})
希望这有帮助^_^ 谢谢,我想我离你越来越近了,但还是不工作。我在我的帖子上做了一个编辑:[EDIT 1]
。您可以检查一下吗?因为您使用的是Ionic 3.0.1,所以需要在@Component中添加提供程序,如下所示@Component({…providers:[FilePath],…})
越来越近了,但还不能工作。我做了另一个版本:[EDIT 2]
。您是在真正的设备上运行还是在爱奥尼亚服务器上运行?在浏览器上无法显示。此图像路径不适用于livereload。如果你只运行安卓而不运行-l
,它会工作得很好。