在Angular项目中如何读取json文件呢？
直接进入主题，我们的最终目得是要读取文件，那么首先我们需要先创建文件，
第一步：创建我们今天所需要在assets创建需要读取的文件Message.json，
如下:
[ { "id": "E0001", "msg": "{0}の取得に失敗しました。" }, { "id": "E0002", "msg": "更新に失敗しました。" }, { "id": "E0003", "msg": "登録に失敗しました。" }, { "id": "E0004", "msg": "削除に失敗しました｡" }, { "id": "E0005", "msg": "{0}の出力に失敗しました。" }, { "id": "E0006", "msg": "{0}のインポートに失敗しました。" }, { "id": "E0007", "msg": "自動トリアーシに失敗しました。" }, { "id": "E0008", "msg": "{0}の取得に失敗しました。システム管理者に問い合わせてください" }, { "id": "E0009", "msg": "{0}の登録に失敗しました。" }, { "id": "E0010", "msg": "テンプレートファイルが存在しません。" }, { "id": "E0011", "msg": "タイムアウトしました。" }, { "id": "W0001", "msg": "正しいExcelファイルを選択してください。" }, { "id": "W0002", "msg": "必須項目{0}が入力されていません。" }, { "id": "W0003", "msg": "{0}が正しくありません。" },{ "id": "W0004", "msg": "新しく登録された脆弱性情報はありません。" }, { "id": "W0005", "msg": "管理番号が正しくありません。管理番号を修正し、再度インポートしてください。" }, { "id": "W0006", "msg": "管理番号が空白のものがあります。管理番号を修正し、再度インポートしてください。" }, { "id": "W0007", "msg": "管理番号が重複しています。管理番号を修正し、再度インポートしてください。" }, { "id": "W0008", "msg": "管理番号{0}が重複しています。" }, { "id": "W0009", "msg": "保存されていないCSイベントがあります。" }, { "id": "W0010", "msg": "保存されていないイベント進捗があります。" }, { "id": "W0011", "msg": "変更された項目がありません。" }, { "id": "W0012", "msg": "削除できませんでした｡" }, { "id": "W0013", "msg": "更新できませんでした｡" }, { "id": "W0014", "msg": "該当する仕分けキーワードがありませんでした｡" }, { "id": "W0015", "msg": "他のユーザ（{0}）が先に更新しています。画面更新を行ってから、再入力をお願いします" }, { "id": "W0016", "msg": "{0}に重複がありました｡" }, { "id": "W0017", "msg": "検索に一致する{0}がありませんでした。" }, { "id": "W0018", "msg": "{0}が複数入力されています。" }, { "id": "W0019", "msg": "{0}が全て入力されていません。" }, { "id": "W0020", "msg": "統一キーワードに紐づく製品が既に登録されています。" }, { "id": "W0021", "msg": "紐づく製品が存在しません。(統一キーワード：{0})" }, { "id": "W0022", "msg": "該当する{0}がありません。" }, { "id": "W0023", "msg": "統一キーワードがありません。" }, { "id": "W0024", "msg": "入力内容が文字数制限を超えています。" }, { "id": "W0025", "msg": "有効開始日は有効終了日を超えています。" }, { "id": "W0026", "msg": "過去日付は入力できません。" }, { "id": "C0001", "msg": "{0}の更新を行いますか？" }, { "id": "C0002", "msg": "{0}の削除を行いますか？" }, { "id": "C0003", "msg": "{0}の新規登録を行いますか？" }, { "id": "C0005", "msg": "自動トリアージを行いますか？" }, { "id": "C0006", "msg": "{0}をエクスポートします。よろしいですか？" }, { "id": "C0007", "msg": "編集中の{0}があります。編集を破棄しますか?" }, { "id": "I0001", "msg": "全件正常に取り込み完了しました。" }, { "id": "I0002", "msg": "取り込み完了。取り込みに失敗した脆弱性情報があります" }, { "id": "I0003", "msg": "新しく登録された脆弱性情報はありません。" }, { "id": "I0004", "msg": "新しく登録された脆弱性情報はありません。取り込みに失敗した脆弱性情報があります。" }, { "id": "I0005", "msg": "更新しました｡" }, { "id": "I0007", "msg": "削除しました｡" }, { "id": "I0008", "msg": "登録しました｡" }, { "id": "I0009", "msg": "更新しました｡ 変更を反映させる場合は更新ボタンを押してください。" }, { "id": "I0010", "msg": "統一キーワードと紐づく製品を登録しました。" } ]
第二步：我们需要在services文件夹下创建一个共享サービス、之后把以下代码封装到共享サービス当中里去 ,之后再创建一个model。
/* * @Author: * @Date: 2021-06-08 15:38:47 * @LastEditTime: 2022-03-16 11:04:56 * @LastEditors: Please set LastEditors * @Description: */ import { HttpClient } from '@angular/common/http'; import { Component, Injectable } from '@angular/core'; import { MessageInfo } from '../../model/MessageInfo'; @Injectable({ providedIn: 'root' }) export class MessageService { static messageInfo: MessageInfo[]; constructor( private http:HttpClient ) { } /** * @description: * @param {*} * @return {*} */ load() { const jsonFile = `assets/config-files/message.json`; return new Promise<void>((resolve, reject) => { return this.http.get<MessageInfo[]>(jsonFile).toPromise().then((response) => { MessageService.messageInfo = response as MessageInfo[]; resolve(); }).catch((response: any) => { reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`); }); }); } static getMessage(id:string ,params?:string[]):string{ var message:string=""; for (let entry of this.messageInfo) { if(entry.id==id){ var msg=entry.msg; if(params){ for(var i=0;i<params?.length!;i++){ msg=msg.replace("{"+i+"}",params![i]); } } return msg; } } return ""; } /** * @description: メッセージ種別を取得 * @param {string} メッセージid * @return {*} メッセージのモジュール */ static getMessageType(id:string):any{ var component:any; return component; } }
/*
* @Author:
* @Date: 2021-06-10 10:56:59
* @LastEditTime: 2021-06-21 13:31:51
* @LastEditors:
* @Description:
*/
export interface MessageInfo {
id:string,
msg:string
}最后在我们需要调用的方法里，调用我们在共享サービス创建的方法即可。
例如:
this .InformationinfoService.getAllDate().subscribe(
res => {
// 处理成功返回的数据
console.log(res);
this .rowData = res as TestParms[];
this .dateType = MessageService.getMessage( "C0005" ,[ "お知らせ" ]);
},
(error) => {
console.log( '詮索に失敗しました' , error);
this .dateType = MessageService.getMessage( "C0008" ,[ "お知らせ" ]);
},
)
