開発環境
cju:~/Projects/ionic2/i2ts $ ionic info
警告: ionic.config.js は廃止されました。削除できます。
システム情報:
Cordova CLI: 6.1.1
Gulp バージョン: CLI バージョン 3.9.1
Gulp ローカル: ローカル バージョン 3.9.1
Ionic フレームワーク バージョン: 2.0.0-beta.6
Ionic CLI バージョン: 2.0.0-beta.25
Ionic アプリLib バージョン: 2.0.0-beta.15
ios-deploy バージョン: 1.8.5
ios-sim バージョン: 5.0.8
OS: Mac OS X El Capitan
Node バージョン: v4.4.2
Xcode バージョン: Xcode 7.3 ビルド バージョン 7D175
問題
ブラウザ プラットフォームと iOS 電話の両方で試しました。ブラウザ プラットフォームで表示するには、次の手順を実行します。
イオン プラットフォーム ブラウザを追加
イオンランブラウザ
ブラウザでは、「Hello Ionic」ページから始まります。「cordova-plugin-file を使用してローカル ファイルに書き込む」ボタンをクリックすると、背面にある「This is new text」が cordova-plugin-file を使用してローカル ファイルに書き込まれます。「cordova-plugin-file を使用してファイルから読み取る」ボタンをクリックすると、コンソール ログにファイルが読み取られたことが示されます。ただし、ビューは更新されません。いずれかのボタンをもう一度クリックすると、ビューが新しいテキストで更新されます。
私はグーグルで関連する問題を見つけました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>