Góc 2 - cách điền biến cục bộ với dữ liệu JSON từ một tệp bên ngoài

Question

Hướng dẫn Angular 2 Tôi đã đọc các biến vị trí trực tiếp trong tệp app.component.ts. Ví dụ: var BAR bên dưới, sẽ lấy dữ liệu mặc dù giao diện {Foo}.

import {Component} from 'angular2/core'; 
import {Foo} from './foo'; 

@Component({ 
    etc. 
}); 

export class AppComponent { 
    bar = BAR; 
} 

var BAR: Foo[] = [ 
    { 'id': 1 }, 
    { 'id': 2 } 
]; 

Tuy nhiên, tôi có dữ liệu cho BAR trong tệp JSON cục bộ. Tôi không tin {HTTP_PROVIDER} là cần thiết. Làm thế nào tôi sẽ đi về nhận được dữ liệu JSON từ các tập tin bên ngoài?

Answer 1

HTTP_PROVIDER là cần thiết nếu bạn muốn tải tệp bằng cách sử dụng http.

Dưới đây là một ví dụ về cách tải tệp json địa phương trên http:

this.result = {friends:[]}; 
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);      

Xem thêm chi tiết ở đây: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Answer 2

Juste đặt tập tin .json của bạn trong thư mục tĩnh của bạn (/ tài sản nếu bạn đang sử dụng cli góc) và nó sẽ hoạt động.

Answer 3

Bạn có thể sử dụng Http nhà cung cấp trong angular2

Hãy chắc chắn rằng bạn đặt tệp json địa phương của bạn trong thư mục www.

getLocalFile(){ 
    return this.http.get('./localFileName.json'). 
     map(res => res.json()); 
} 

Thao tác này sẽ trả về tệp JSON cục bộ.

Answer 4

Tạo một tập tin với nội dung này

export const BAR= [ { 'id': 1 }, { 'id': 2 } ];

tiết kiệm nó như BarConfig.ts hoặc một số như

sau sử dụng nó như sau

import { BAR } from './BarConfig'; let bar= BAR;

hoặc thậm chí tốt hơn, sử dụng BAR trực tiếp nơi bạn cần

Answer 5

Tùy chọn tốt nhất là tạo tệp json và lưu trữ chi tiết json bên trong tệp và gọi tệp đó bằng cách sử dụng như dưới đây.

Nếu bạn sử dụng góc-cli Giữ tệp json bên trong thư mục tài sản (song song với ứng dụng dir) thư mục

return this.http.get('<json file path inside assets folder>.json')) 
    .map((response: Response) => { 
     console.log("mock data" + response.json()); 
     return response.json(); 
    } 
    ) 
    .catch(this.handleError); 
} 

Lưu ý: ở đây bạn chỉ cần cung cấp cho con đường bên trong tài sản thư mục như tài sản/json/oldjson. json sau đó bạn cần phải viết đường dẫn như /json/oldjson.json

Nếu bạn sử dụng webpack thì bạn cần phải làm theo cùng một cấu trúc bên trong thư mục công cộng tương tự như thư mục tài sản của nó.