如何使用Ionic本机HTTP访问资产目录？

如何解决如何使用Ionic本机HTTP访问资产目录？

我有一个使用ionic 5开发的应用程序，用于管理使用本地http插件的设备上的http调用。 在启动时，应用程序必须访问asset文件夹以检索具有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,params) {
        return new Observable(ob => {
            switch (method) {
                case 'GET':
                    this.http.get(url,params).then(
                        this.successCallback(ob),this.errorCallback(ob)
                    )
                    break;
                case 'POST':
                    this.http.post(url,this.errorCallback(ob)
                    );
                    break;
                case 'PUT':
                    this.http.put(url,this.errorCallback(ob)
                    );
                    break;
                case 'DELETE':
                    this.http.delete(url,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();
        };
    }
}

解决方法

为回应您在下面的评论，我正在更新我的答案： 似乎您还需要从the ngx-translate project添加http-loader帮助器类。

还有一个stack blitz which shows a basic example of implementing this.

注意：这是通过Google查找的简单解决方案->“使用本地数据进行ngx转换”

---

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

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

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

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

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

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

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

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

 Translation: any = translation;

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

参考：HOW TO READ LOCAL JSON