각도 2의 한 구성 요소에서 다른 구성 요소로 데이터 전달 (상위에서 하위로 또는 하위에서 상위로)?

Question

안녕하세요 저는 2 번 각도에서 새로운입니다. 다음과 같은 상황에 처해 있습니다. 내 홈페이지 구성 요소에 ul이 있습니다. 내가 작업 설명에 대한 중포 기지 API를 호출을하고 배열에 저장하고하는 작업 배열과 내가 UI의 리 중 하나를 클릭에 방법 다음

<ul *ngFor = "let job of jobs " class="job-list" routerLink="jobdetails" > 
    <div class="row"> 
     <div class="col-md-3"> 
     <li>{{job.nameOfThePost}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.lastDateOfApplication}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.noOfJob}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.educationalQualification}}</li> 
     </div> 
    </div> 
    </ul> 

처럼 홈페이지에서 데이터를 표시하고 말할 수 난 새로운 구성 요소로 사용자를 데려 가고 싶다면 jobdetails 구성 요소를 말할 수 있습니다. 내 문제는 배열을 jobdetails 구성 요소에 전달하고 싶습니다. jobdetails 구성 요소는 홈페이지 구성 요소의 하위 구성 요소가 아니기 때문에 홈페이지 구성 요소에서 jobdetails 구성 요소로 데이터를 전달하는 방법은 무엇입니까? 내가 찾은 모든 도움은 아이에서 부모 또는 부모에게 데이터를 전달하는 방법에 관한 것입니다. 내가 어떻게 할 수 있니?

Answer 1

목표를 달성하는 데는 여러 가지 방법이 있습니다. 모든 클래스에는 일종의 공유 클래스가 포함됩니다. @ AJT_82가 이미 제시했듯이 공유 서비스는 Angular를 처음 접하는 사람에게 가장 보편적 인 방법입니다.

또 다른 대안은 NgRX를 사용하고 두 번째 페이지가 도착할 때 구독 할 수있는 NgRX 테이블로 상태 정보를 푸시하는 것입니다.

데이터가 오래된되지 않도록 당신은 또한 단지 ID를 전달하고 당신이 그것을 얻을 때 데이터베이스에서 정보를로드 고려할 수 있습니다

Answer 2

어느 요소 하나에서 정보를 공유하는 서비스에 대한 이동 또 다른 경우, 작은 스케일 응용 프로그램 인 경우 권장되는 방법입니다. 중첩 다중 이벤트 이미 터는 데이터를 처리하는 좋은 방법이 아닙니다.

다른 방법은 Redux Approach이며, 중대형 응용 프로그램에 권장됩니다. 여기에는 Store and Reducers의 개념이 있으며 모든 데이터는 한 곳에서 처리됩니다. 여러 구성 요소간에 데이터를 동기화해야 할 때 좋습니다.

take a look for further info