时间戳

首页 > 解决方案 > 如何使用离子原生 http 访问资产目录？

angular - 如何使用离子原生 http 访问资产目录？

问题描述

我有一个使用 ionic 5 开发的应用程序，用于管理我使用本机 http 插件的设备上的 http 调用。在启动时，应用程序必须访问 assets 文件夹以检索带有 ngx tralslate 翻译的 json。迄今为止，我从通话中返回了一个协议错误。这是错误文本：请求出错：无协议：./assets/i18n/it-IT.json 如何访问设备上的资产文件夹？我应该输入什么协议？

import {Injectable} from "@angular/core";
import {
    HttpErrorResponse,
    HttpEvent,
    HttpHandler,
    HttpInterceptor,
    HttpRequest,
    HttpResponse
} from "@angular/common/http";
import {Observable, throwError} from "rxjs";
import {Platform} from "@ionic/angular";
import {HTTP} from "@ionic-native/http/ngx";
import {catchError, finalize, map} from "rxjs/operators";
import {Store} from "@ngrx/store";
import {hideLoader, viewLoader} from "../loader-store/loader.action";

@Injectable()
export class HttpNativeInterceptor implements HttpInterceptor {
    constructor(
        private platform: Platform,
        private http: HTTP,
        private store: Store<any>
    ) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const headers = {};
        const params = {};
        const {method, url} = req;
        this.store.dispatch(viewLoader())
        return (this.platform.is('capacitor') ? this.callNative(url, method, headers, params) : next.handle(req))
            .pipe(
                map((resp: HttpEvent<any>) => {
                    return resp
                }),
                catchError((error: HttpErrorResponse) => {
                    return throwError(error);
                }),
                finalize(() => {
                    this.store.dispatch(hideLoader())
                })
            )
    }

    callNative(url, method, headers, params) {
        return new Observable(ob => {
            switch (method) {
                case 'GET':
                    this.http.get(url, headers, params).then(
                        this.successCallback(ob),
                        this.errorCallback(ob)
                    )
                    break;
                case 'POST':
                    this.http.post(url, headers, params).then(
                        this.successCallback(ob),
                        this.errorCallback(ob)
                    );
                    break;
                case 'PUT':
                    this.http.put(url, headers, params).then(
                        this.successCallback(ob),
                        this.errorCallback(ob)
                    );
                    break;
                case 'DELETE':
                    this.http.delete(url, headers, params).then(
                        this.successCallback(ob),
                        this.errorCallback(ob)
                    );
                    break;
            }
        });
    }

    successCallback(ob) {
        return (response: any) => {
            ob.next(new HttpResponse({body: JSON.parse(response.data)}));
            ob.complete();
        };
    }

    errorCallback(ob) {
        return (response: any) => {
            ob.next(new HttpErrorResponse({error: response.error}));
            ob.complete();
        };
    }
}

标签： angularionic-frameworkngx-translateionic5

解决方案

为了回应您在下面的评论，我正在更新我的答案：看来您还需要从ngx-translate 项目中添加 http-loader 帮助程序类。

还有一个堆栈闪电战，它显示了实现这一点的基本示例。

注意：这是使用 Google 查找的简单解决方案 -> “ngx-translate with local data”

用于历史目的的原始答案位于下方：这不是离子问题或 http 问题。

由于该文件是本地文件，因此无需使用 HTTP。

为了能够在本地读取 json，请将一个名为 njson-typings.d.ts 的文件添加到您的 src 目录

 declare module "*.json" {
  const value: any;
  export default value;
}

然后，您可以在文件顶部导入该信息，如下所示：

 import translation from '../assets/i18n/it-IT.json';

注意：您可能必须根据导入的文件更改相对文件路径。

在您的组件本身中，您可以像这样使导入可用：

 Translation: any = translation;

然后，您可以在模板或代码中引用它。

参考：如何读取本地 JSON

推荐阅读