如何使用 ionic 3 将 .html 文件中的数据从 api 解码为 base64
how to decode data from api to base64 in .html file using ionic 3
我正在尝试在 page.html 文件中查看一些数据来自 API 并且这些数据只是通过 base64 编码的长文本，问题是我想解码里面的文本 html 文件不在 page.ts 文件，所以我为此尝试了很多逻辑，但没有任何效果。
HTML 文件中的示例：
- {{item.text|| base64}}
- {{item.text|| decodeURIComponent}}
- {{item.text|| atob}}
- atob({{item.text}})
但没有任何效果。
在我尝试使用的 TS 页面内
decodeURIComponent(转义(window.atob(ielement.text)))
它正在工作，但我想从 html 页
这是来自 API 的文字：
aGVsbG8gd29ybGQh
提前致谢..
您可以创建一个 Angular 管道来解码 base64 字符串，如下所示：
import { Pipe, PipeTransform } from '@angular/core';
/*
* Usage:
* value | decodeBase64
* Example:
* {{ 'aGFyZXNo' | decodeBase64 }}
*
*/
@Pipe({name: 'decodeBase64'})
export class DecodeBase64Pipe implements PipeTransform {
transform(value: string): string {
return decodeURIComponent(escape(window.atob(value)));
}
}
并在您的 HTML:
中如下使用此管道
<p>Decoded text: {{'aGFyZXNo' | decodeBase64}}</p>
您需要在 app.module 文件中添加 Pipe 才能注册。
我正在尝试在 page.html 文件中查看一些数据来自 API 并且这些数据只是通过 base64 编码的长文本，问题是我想解码里面的文本 html 文件不在 page.ts 文件，所以我为此尝试了很多逻辑，但没有任何效果。 HTML 文件中的示例：
- {{item.text|| base64}}
- {{item.text|| decodeURIComponent}}
- {{item.text|| atob}}
- atob({{item.text}})
但没有任何效果。 在我尝试使用的 TS 页面内 decodeURIComponent(转义(window.atob(ielement.text))) 它正在工作，但我想从 html 页
这是来自 API 的文字： aGVsbG8gd29ybGQh
提前致谢..
您可以创建一个 Angular 管道来解码 base64 字符串，如下所示：
import { Pipe, PipeTransform } from '@angular/core';
/*
* Usage:
* value | decodeBase64
* Example:
* {{ 'aGFyZXNo' | decodeBase64 }}
*
*/
@Pipe({name: 'decodeBase64'})
export class DecodeBase64Pipe implements PipeTransform {
transform(value: string): string {
return decodeURIComponent(escape(window.atob(value)));
}
}
并在您的 HTML:
中如下使用此管道<p>Decoded text: {{'aGFyZXNo' | decodeBase64}}</p>
您需要在 app.module 文件中添加 Pipe 才能注册。