开发环境
cju:〜/ Projects / ionic2 / i2ts $ ionic info WARN:ionic.config.js已被弃用,你可以删除它 . 您的系统信息:Cordova CLI:6.1.1 Gulp版本:CLI版本3.9.1 Gulp本地:本地版本3.9.1 Ionic Framework版本:2.0.0-beta.6 Ionic CLI版本:2.0.0-beta.25离子应用程序Lib版本:2.0.0-beta.15 ios-deploy版本:1.8.5 ios-sim版本:5.0.8操作系统:Mac OS X El Capitan节点版本:v4.4.2 Xcode版本:Xcode 7.3构建版本7D175
问题
我在浏览器平台和ios手机上都试过了 . 要在浏览器平台上查看,请执行以下操作
离子平台添加更强大的离子运行浏览器
在浏览器上,它以“Hello Ionic”页面开头 . 单击“使用cordova-plugin-file写入本地文件”按钮,在后面,“这是新文本”将使用cordova-plugin-file写入本地文件 . 单击“使用cordova-plugin-file从文件读取”按钮,控制台日志显示该文件已被回读 . 但是,视图未更新 . 再次单击任何按钮,视图将使用新文本进行更新 .
我用Google搜索并找到了相关的问题https://github.com/angular/zone.js/issues/137 . 这表示cordova-plugin-file中的FileReader没有分区 . 但我在我的项目中使用"ionic-angular":"2.0.0-beta.6" . 它不应该包括修复程序 . 我仍然在我的ionic2项目中看到同样的问题137 .
代码是https://github.com/CharlesJu1/FileReaderNotZoned
这是hello-ionic.ts文件 .
import {Page} from 'ionic-angular';
declare var window: any;
declare var LocalFileSystem: any;
@Page({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
showText: string = 'Initial text string';
writeText() {
var newText = 'This is new text';
function overWriteFile(fileEntry, dataObj) {
// Create a FileWriter object for our FileEntry.
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function() {
fileWriter.seek(0);
fileWriter.write(dataObj);
}
//truncate() will call onwriteend.
fileWriter.truncate(0);
});
}
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function(fileEntry) {
console.log("fileEntry is file?" + fileEntry.isFile.toString());
overWriteFile(fileEntry, newText);
}, function(error) { });
}, function(error) { });
}
test() {
var that = this;
var update = function() {
that.showText = 'This is test text not from local file';
}
setTimeout(update, 1000);
}
readText() {
var that = this;
var readFile = function(fileEntry, readFileCb) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function() {
//this in the following points to fileEntry.file
console.log("Successful file read: " + this.result);
readFileCb(this.result);
};
reader.readAsText(file);
}, () => { console.log('Error reading file ') });
}
var readFileCb = function(fileContent: string) {
that.showText = fileContent;
console.log('readFileCb: ' + that.showText);
}
//check https://github.com/apache/cordova-plugin-file for details
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: false }, function(fileEntry) {
console.log("fileEntry is file?" + fileEntry.isFile.toString());
// fileEntry.name == 'someFile.txt'
// fileEntry.fullPath == '/someFile.txt'
readFile(fileEntry, readFileCb);
}, function(error) { });
}, function(error) { });
}
}
这是hello-ionic.html文件 .
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
<ion-content padding class="getting-started">
<p>
{{showText}}
</p>
<button (click)="writeText()">
Write to local file using cordova-plugin-file
</button>
<br>
<button (click)="readText()">
Read from file using cordova-plugin-file
</button>
<button (click)="test()">
Set the text with a timer
</button>
</ion-content>
1 回答
围绕Zones的beta-5和beta-6存在一些已知问题 . 一个新的测试版应尽快解决它们,但在此期间你可以采取以下步骤:
导入NgZone
注入NgZone的实例
用于在NgZone实例的run方法中使用数据绑定的包裹调用 .
在这里查看示例:
https://github.com/danbucholtz/ionic2-weight-tracker/blob/master/app/pages/photo-list/PhotoList.ts#L78
谢谢,丹