স্থানীয় .json ফাইল পড়তে কৌণিক 5 পরিষেবা

Question 1

আমি কৌণিক 5 ব্যবহার করছি এবং আমি কৌণিক-ক্লিপ ব্যবহার করে একটি পরিষেবা তৈরি করেছি

আমি যা করতে চাই তা হল একটি পরিষেবা তৈরি করা যা Angular 5 এর জন্য একটি স্থানীয় জেসন ফাইল পড়ে।

আমার এটাই ... আমি কিছুটা আটকে আছি ...

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

আমি কীভাবে এটি শেষ করতে পারি?

Question 2

প্রথমে আপনাকে ইনজেকশন দিতে হবে HttpClientএবং না HttpClientModule, দ্বিতীয় জিনিসটি আপনাকে অপসারণ .map((res:any) => res.json())করতে হবে আর আপনার আর এটির প্রয়োজন হবে না কারণ নতুন HttpClientআপনাকে ডিফল্টরূপে প্রতিক্রিয়া দেবে, শেষ পর্যন্ত নিশ্চিত করে নিন যে আপনি আমদানি HttpClientModuleকরেছেন AppModule :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

এটি আপনার অংশে যুক্ত করতে:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Question 3

আপনার বিকল্প সমাধান রয়েছে, সরাসরি আপনার জসন আমদানি করুন।

সংকলন করতে, আপনার typings.d.ts ফাইলে এই মডিউলটি ঘোষণা করুন

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

আপনার কোডে

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Question 4

কৌণিক 7 এর জন্য, আমি সরাসরি জসন ডেটা আমদানি করতে এই পদক্ষেপগুলি অনুসরণ করেছি:

Tsconfig.app.json এ:

যোগ "resolveJsonModule": trueমধ্যে"compilerOptions"

একটি পরিষেবা বা উপাদান:

import * as exampleData from '../example.json';

এবং তারপর

private example = exampleData;

Question 5

ওয়েব সার্ভার থেকে কোনও ফাইল পড়ার পরিবর্তে একটি স্থানীয় ফাইল সত্যিই পড়ার উপায় সন্ধান করার সময় আমি এই প্রশ্নটি পেয়েছি, যার পরিবর্তে আমি একটি "রিমোট ফাইল" কল করব।

শুধু কল করুন require:

const content = require('../../path_of_your.json');

কৌণিক-সিএলআই উত্স কোডটি আমাকে অনুপ্রাণিত করেছিল: আমি জানতে পেরেছিলাম যে তারা প্রকৃত এইচটিএমএল সংস্থানকে কল করে templateUrlসম্পত্তি templateএবং মান দ্বারা প্রতিস্থাপন করে উপাদান উপাদানগুলি অন্তর্ভুক্ত requireকরে।

আপনি যদি এওটি সংকলক ব্যবহার করেন তবে আপনাকে নোডের ধরণের সংজ্ঞা যোগ করতে হবে tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Question 6

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

আরও তথ্যের জন্য এই নিবন্ধটি দেখুন ।

Question 7

এটা চেষ্টা কর

আপনার সেবার কোড লিখুন

import {Observable, of} from 'rxjs';

আমদানি জেসন ফাইল

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

উপাদান মধ্যে

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Question 8

আসুন একটি জেএসএন ফাইল তৈরি করি, আমরা এটি নামকরণ করি navbar.json আপনি যা খুশি নাম রাখতে পারেন!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

এখন আমরা কিছু মেনু ডেটা সহ একটি JSON ফাইল তৈরি করেছি। আমরা অ্যাপের উপাদান ফাইলটিতে যাব এবং নীচের কোডটি পেস্ট করব।

app.componal.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

এখন আপনার অ্যাঙ্গুলার 7 অ্যাপ্লিকেশন স্থানীয় জেএসএন ফাইল থেকে ডেটা পরিবেশন করতে প্রস্তুত।

App.componal.html এ যান এবং এতে নিম্নলিখিত কোডটি আটকে দিন।

app.componal.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

Question 9

টাইপস্ক্রিপ্ট ৩..3.৩, এবং কৌণিক Using ব্যবহার করে, এই সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি।

কি করেনি কাজ টিউটোরিয়াল অনুসরণ করতে ছিল এখানে যা বলেছেন আপনি একটি ছোট ফাইল নামক যোগ করতে হবে njson-typings.d.tsআপনার প্রকল্পের, এই ধারণকারী:

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

এটি হয়ে গেলে, আমি কেবল আমার হার্ডকোডযুক্ত জসন ডেটা আমদানি করতে পারি:

import employeeData from '../../assets/employees.json';

এবং এটি আমার উপাদানটিতে ব্যবহার করুন:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }