2016-10-10 4 views
6

하나의 구성 요소가 있고 다른 모듈에있는 다른 구성 요소로 데이터를 전달하고 싶습니다. 실제로 내 app.component은 이러한 하위 모듈의 부모입니다. 각 자식 모듈이 app.component에게 데이터를 보내길 바란다. 그러나 그들은 오직 라우팅의 의미에서 자녀와 부모입니다. 그래서 그들은 실제로 부모와 자녀가 아닙니다. 내 말은각도가 다른 모듈 구성 요소 통신

app.component 내 주형은 다음과 같습니다

<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li><a routerLink="link1" routerLinkActive="active">Page1</a></li> 
     <li><a routerLink="link2" routerLinkActive="active">Page2</a></li> 
     <li><a routerLink="link3" routerLinkActive="active">Page3</a></li> 
     <li><a routerLink="link4" routerLinkActive="active">Page4</a></li> 
    </ul> 
    </div> 
</nav> 
<div *ngIf="needsSidebar" id="sidebar">some content</div> 
<div> 
    <router-outlet></router-outlet> 
</div> 

그래서 app.component 이러한 모듈과 그들의 구성 요소와 직접 관련이 없습니다. Output을 사용하려고했지만 구성 요소가 다른 모듈에서 고장난 것이므로 실패했습니다. 내가해야할 일에서 길을 잃었 어. 내 "하위"모듈이 데이터를 app.module까지 전송하여 사이드 바가 필요한지, 사이드 바가 표시되어야 하는지를 알려주고 싶습니다. 내가 어떻게 해?

답변

6

모듈이 어떻게 관련되는지는 중요하지 않습니다. 구성 요소가 구성 요소 뷰의 하위 요소 인 경우 중요합니다. 이 경우 Angulars 바인딩 구문을 사용할 수 있습니다. 다른 경우에는 공유 서비스를 사용하십시오. 자세한 내용은 https://angular.io/docs/ts/latest/cookbook/component-communication.html

공유 서비스를 제공 업체로 추가하는 경우 중요합니다. 구성 요소에 추가하면이 구성 요소의 인스턴스와 해당 하위 및 하위 구성 요소 만이이 서비스 인스턴스를 공유합니다. @NgModule() 공급자에 서비스를 추가하면 단일 인스턴스가 전체 응용 프로그램과 공유됩니다 (지연되지 않은 모듈의 경우).

+0

각도 바인딩을 출력과 함께 사용하려했지만 내 HTML에는 선택자가 없으므로 '라우터 콘센트'가 있는데 어떻게 이벤트를 전달할 수 있습니까? 그리고 선택기 jusn으로 테스트 할 때이 오류가 발생했습니다 :'zone.js : 355 Unhandled Promise 거부 : 템플릿 구문 분석 오류 : 'child-selector'는 알려진 요소가 아닙니다. ' –

+0

자식 구성 요소는 'declarations : []'에있는'exports : []'에 NgModule'에 추가 될 수 있고 현재의'NgModule'은'imports : []'에 다른 모듈을 가질 필요가 있습니다. 그렇다면''로 묶는 것이 효과적이다. 라우터가 추가 한 구성 요소의 경우 바인딩을 지원하지 않습니다. 이 경우 공유 서비스를 사용해야합니다. –

+2

고마워, 그럼, 공유 서비스는 나를위한 것 같아. –

1

이 시나리오에서는 sharedModule을 볼 수 있습니다. SharedModule은 다른 모듈/구성 요소에서 사용하고자하는 services,pipes & etc을 공유합니다.