2017-11-15 2 views
0

내 Angular 4 앱에 각 구성 요소가 포함되어 있습니다. 에는 템플릿에 표시되는 다른 JSON 파일의 특정 속성 집합이 필요합니다. . 모든 속성을 포함하는 공통 JSON 파일을 만들었고 app-component가 해당 속성 배열을 포함하는 서비스를 사용하여 호출 될 때로드합니다.4 번 구성 요소의 파일에서 JSON 값/속성 가져 오기

그런 다음 동일한 서비스를 여러 구성 요소에 삽입하고 채워진 배열을 가져옵니다. 값은 HTML에 모두 표시됩니다.

그러나이 방법은 특히 상수 크기가 커지면 조금 시간이 걸리는 것처럼 보입니다. 한 번에 수천 개의 상수를로드하고 그 중 일부가 필요한 다른 구성 요소에 주입하는 것은 좋은 방법이 아닙니다.

각 구성 요소에 대한 특정 contansts JSON 파일을 작성하고 구성 요소가 실제로 초기화 될 때로드하는 방법에 대해 기꺼이 작업했습니다. 이렇게하면 무거운 JSON 객체의 부담을 덜 수 있으며 해당 구성 요소에 필요한 속성 만로드됩니다. 내 상수 서비스의

load() 방법은 다음과 같이 보입니다 :

@Injectable() 
export class ConstantsService { 
constructor(private http: HttpClient) { 
    console.log('ConstantsService created'); 
} 
    constants = {}; 
    load() { 
     var constants = {}; 
     var cons = 'constants'; 

     var constantsResourceUrl = 
      'path' + cons + '.json'; 

     this.http.get(constantsResourceUrl) 
      .subscribe(result => { 
       this.constants = result; 
      }, 
      error => this.log.error(constantsResource + ' could not be loaded') 
      ); 
    } 
} 

을 그리고 내 구성 요소는 상수의 값을 얻기 위해 다음과 같이 : 어떤 도움을 주시면 감사하겠습니다

@Component({ 
    selector: 'xyz', 
    templateUrl: './xyz.html', 
    styleUrl: './xyz.css' 
}) 
export class MyComponent { 
    consts = {}; 

    constructor(private constantsService: ConstantsService) { 

    consts = this.constantsService.constants; 
    } 
} 

합니다.

+0

왜 로컬 데이터베이스를 사용할 수 없습니까? –

+0

DB에서 히트하지 않고 JSON을 사용하여 기꺼이 작업했습니다. –

+0

그래서 파일에서 json을로드하려고합니다. 왜 그것을 서비스로 가져와 데이터를 사용하지 않는가? 또는 json의 데이터를 서비스로 가져올 수 없다는 문제가 있습니까? –

답변

1

비슷한 딜레마가있는 경우. 설정/매개 변수 동작에 db 또는 json 파일을 사용합니다. 동적 인 내용은 결국 db로 끝나고 결국 소스에서 번들 될 수 있기 때문에 정적 json 콘텐츠를 가져 오기 위해 HTTP 요청을 가져오고 사용하는 것은 거의 바보가 아닙니다. 나는 그것을 분할하고 ts에서 여러 내 보낸 상수를 사용했습니다. 파일 같은 :

수출 const를 dummyLookupConst =`{ "QUERYNO": 0, "ID": 250, ...}

다음은 필요에 의해 구성 요소로 가져옵니다.

+0

내 보낸 const 파일을 사용할 때의 문제점은 구성 요소를 새로 고칠 때 변경 될 수 없다는 것입니다. 예를 들어 사용자가 html의 특정 링크를 클릭하고 다른 언어로 에 다른 상수 세트를 사용하려는 경우 어떻게 달성 할 수 있습니까? –

관련 문제