最近做的項目使用的是angular6開發的，做的是前後端分離的，本來自己是做後端的，卻被拉來搞前端了，並且之前也沒用過angular，可想在開發過程中肯定會遇到一個又一個的坑，沒辦法，遇到一個解決一個。
其中調用手機相冊和相機就是其中一個了，並且用的還是第三方合作單位的js，廢話不多說，直接講解遇到的問題；
一，首先就是angular工程如何引入外部JS文件
這個問題其實網上有一大堆的解決方法，主要就是把文件放在assert目錄下，angular.json中增加配置，這裏就不詳細說了；
二，調用外部js提供的方法，回調函數內無法獲取到該類中的變量
在選擇好照片或者拍完照片後，回調函數內會返回picture對象，裏面有一個值是base64編碼的pic屬性和文件名fileName屬性，所以我需要在回調中將base64編碼傳給img標籤，然而在傳遞的過程我發現，img綁定的值一直都是空，檢查了幾次base64值也傳給ts中的變量了，然而打印出來的話，這個值就是空，諮詢了別人之後，才知道是回調方法的原因，回調方法內的this.變量可能不是ts中的，方法會認爲是回調中的變量，所以最後在方法體的後邊增加了bind方法，來獲取類中的變量，代碼如下：
iPortal.getCamera().takePicture(function (picture) {
// 調用拍照功能
this.pictures.push(picture.pic);
// 將圖片對象放入另一個數組 上傳圖片使用
this.pictBase64.push(picture);
// 及時更新圖片數組，選擇後顯示在頁面
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});
}.bind(this),
function (err) {
this.toastTip(err);
}.bind(this),
1);
三、ios可以顯示base64編碼圖片，安卓卻無法顯示
回調中可以給綁定變量賦值後，卻發現蘋果手機能顯示圖拍，但是安卓卻沒法顯示，研究了很久，依然沒發現問題所在，最後只能打印一下兩種手機的顯示的base64編碼，看看有什麼區別，果然，蘋果手機顯示的編碼是很緊湊的，沒有空格，然而安卓的呢：
有換行或者是空格，所以只能把編碼內的這些給搞掉了，並且還得區分一下當前設備的類型，是蘋果？還是安卓
iPortal.getCamera().takePicture(function (picture) {
// 調用拍照功能
let u = navigator.userAgent;
// 當前設備信息
let device = '';
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
// 安卓手機
device = 'Android';
let codeArr = picture.pic;
// 圖片不超過9張的情況下放入數組
this.pictures.push(codeArr.replace(/\s*/g, ''));
} else if (u.indexOf('iPhone') > -1) {
// 蘋果手機
device = 'iPhone';
// 圖片不超過9張的情況下放入數組
this.pictures.push(picture.pic);
}
// 將圖片對象放入另一個數組 上傳圖片使用
this.pictBase64.push(picture);
// 及時更新圖片數組，選擇後顯示在頁面
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});
}.bind(this),
function (err) {
this.toastTip(err);
}.bind(this),
1);
codeArr.replace(/\s*/g, '')就是要刪除編碼中的空格和換行；
四，數據更新強加載
照片選擇後，img標籤沒法立即顯示圖片，需要點擊一下其他空白地方，圖片纔出來，代碼中的這一段，就是解決這個問題的：
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});
給一個延時加載，及時更新變量內數據就解決了；