Question

我正在使用离子2的简单代码：

<button (click)="takePicture()" >Take a pic!</button>
<img [src]="url || '//:0'">

然后这是我的Typescript页面：

import {Page} from "ionic-framework/ionic";

@Page({
    templateUrl: 'build/pages/smartscan/smartScan.html'
}
)

export class SmartScan {

public url:string;

constructor() {
    console.log("Starting SmartScan page ...");
}

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture( (imageURI) => {

        this.url = imageURI;

        console.log("URI of the picture taken is : "+this.url);

        console.log(JSON.stringify(this));

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

    }, function (err) {
        console.log(JSON.stringify(err));
    }, {});

   /* this.url = "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg";
*/
}

}

拍摄照片后，不显示任何内容。我注意到了＆＃34; src＆＃34; Angular没有更新。我在使用＆＃34; var image = ... image.src = ...＆＃34;的评论中测试了部分代码。但是直接操纵DOM并且我不想要这个。

请问你能看出问题所在吗？

Answer 1

尝试使用zone.run()从Angular区域外执行的任务重新进入Angular区域。

这对我来说对于本地存储的异步任务很有用。

类似的东西：

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture((imageURI) => {

         console.log("URI of the picture taken is : "+imageURI);
         zone.run(()=>{ this.url = imageURI; })

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

     }, (err) => {
         console.log(JSON.stringify(err));
    }, {});
}

Answer 2

您需要对回调函数使用不同的方法，名为arrow function notation：

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture((imageURI) => {
         this.url = imageURI;

         console.log("URI of the picture taken is : "+this.url);

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

     }, (err) => {
         console.log(JSON.stringify(err));
    }, {});
}

请注意我已将function() {}替换为() => {}，这样this中的this.url实际上是指组件对象

Answer 3

我终于使它成功了，这是完整的代码解决方案：

https://github.com/angular/angular/issues/6340#issuecomment-179712658

需要在要修改的属性周围使用zone.run（）并将区域变量注入构造函数

组件的构造函数应该看起来像

@Override
public void onConfigurationChanged(Configuration newConfig) {
  // refresh your views here
  super.onConfigurationChanged(newConfig);
}

Answer 4

我通过添加'？'解决了类似的问题。 +图片URI之后的随机数（例如myImage.jpg？74374565346）。为此，必须在刷新图片时刷新混合应用程序容器（浏览器）。

这种解决方案在您在本地文件系统中更改图片但使用相同的URI或文件名的情况下有效。

从相机拍摄照片后图像不会刷新

4 个答案: