angular2+ionic2调用百度翻译API程序
参考百度翻译API提供的相关文档，拟实现基于anguler2+ionic2框架的翻译程序
在程序的实现过程中主要学习了以下几点：
1.将JS示例程序移植到angular2框架中；
2.angular2调用JS脚本；
3.运用了jsonp进行网络请求。
官网给出的是一个html格式的demo：
<!doctype html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
var appid = '2015063000000001';
var key = '12345678';
var salt = (new Date).getTime();
var query = 'apple';
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
}
});
</script>
</body>里面用到了jquery的ajax请求和调用MD5加密算法，所以要将程序移植到angular2中，需要解决以上两个调用的问题。
示例程序首先调用了MD5加密算法对发送的数据加密（<script src="./md5.js"></script>），对于angular2，要么自己写一个函数实现MD5加密，要么调用demo自带的脚本ma5.js，为了多学一点知识，于是开启了angular调用JS脚本的探索之旅，看了网上很多文章，终于找到了一个比较好的解决方案：https://blog.****.net/xiekongxk/article/details/52233031。
-
1）首先新建一个.d.ts格式的脚本,里面声明要引用JS库里面定义的变量，变量名要保持一致
2）把MD5.JS脚本放在www目录下
然后在www/index.html中导入js
最后在需要用的ts文件里引用，就可以调用MD5.JS脚本中的主函数了
2.demo使用jquery.ajax进行网络请求，并且返回数据为jsonp，不是json，所以一开始我使用angular2中的http.get()请求会报如下错误：
将http.get()替换为jsonp.get()后，又会报以下错误：
网上找到了解决方案：https://segmentfault.com/a/1190000008345807
需要在参数中添加callback参数，同时callCount需要递增，即可解决问题。
完整代码如下：
this.str1 =this.appid+this.query+this.salt+this.key;
this.sign = MD5(this.str1);
let params = new URLSearchParams();
params.append("q",this.query);
params.append("from",this.from);
params.append("to",this.to);
params.append("appid",this.appid);
params.append("salt",this.salt);
params.append("sign",this.sign);
let callback="__ng_jsonp__.__req"+this.callCount+".finished";
params.set("callback", callback);
this.callCount++;
let options = new RequestOptions({search:params});
this.jsonp.get(this.url,options)
.toPromise()
.then(response=>{
let data = response.json();
if(data.trans_result)
{
this.result=data.trans_result[0].dst;
console.log(this.result);
}
else if(data.error_code){
console.log(data.error_msg);
}
}).catch(error=>{
console.log(error);
console.log("false");
})最后需要注意的几个小点：
1.转码问题：若需要翻译中文，首先要将中文进行utf-8编码。
2.参数名称：容易写错的参数名，例如把from写成了form之类的。