在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" ,[ "お知らせ" ]);
},
)

浙公網安備 33010602011771號