2016-08-09 4 views
1

두 구성 요소와 두 구성 요소가 공유하는 공유 서비스가 있습니다. 두 개의 라디오 버튼이고 하나는 거기angular2 subject가 변경 내용을 구독하지 않습니다.

shared.service.ts

// ..... top level codes are skipped 

private pickAnalysisForBubble = new Subject<any>(); 

    analysisForBubble$ = this.pickAnalysisForBubble.asObservable(); 

    mapToggleToPointOrBubble(value) { 
    this.pickAnalysisForBubble.next(value); 
    } 

utility.component.ts

뷰 (utility.component.html)은 미리 선택된 (0120) 이벤트 : (나는 shared.service 수입 및 공급 업체로이 추가되었습니다.)

changeToPoint(event){ 
    # analysisInteraction is the shared service constructor 
    this.analysisInteraction.mapToggleToPointOrBubble(event.target.value); 
} 

map.component.ts

나는 shared.service을 수입 생성자를 추가 한합니다. 그런 다음 ngOnInit에서 subscribe로 변경하려고 시도했지만 이 작동하지 않습니다.

# analysisInteraction is the shared service constructor 
this.analysisInteraction.analysisForBubble$.subscribe(
     data => { 
      this.DrawType = data; 
      console.log("Drawtype fixed"); 
     }); 

나는이 tutorial에 따라 변화를 감지 할 수 subject을 사용하고 있습니다. 내가 뭘 잘못하고있어?

답변

1

같은 서비스 인스턴스를 공유하지 않는 것 같습니다. 응용 프로그램을 부트 스트랩 할 때 해당 공급자를 지정하거나 주요 구성 요소 내에서 할 : 당신이 하위 구성 요소의 providers 속성 내에서 지정하면

bootstrap(AppComponent, [ SharedService ]); 

또는

@Component({ 
    (...) 
    providers: [ SharedService ] 
}) 
export class AppComponent { 
    (...) 
} 

, 당신은 공유 확실하지 않은 같은 인스턴스 ... 때문에 hierarc의

편집

hical 인젝터, 각 구성 요소는 자체 인스턴스를 가지며 동일한 구성 요소를 공유하지 않습니다. 따라서 공유 서비스는 main 구성 요소에 공급자로 추가되어야합니다. 또한 공유 서비스는 하위 구성 요소 제공 업체에 포함되어서는 안됩니다.

+0

예, 두 구성 요소 모두에 'sharedService'를 제공자로 추가했습니다. – Emu

+0

내 'main.ts' 파일에 내 하위 구성 요소에도'sharedService'를 추가했습니다. 그래도 작동이 안되는. 어떤 단서? – Emu

+0

그게 문제입니다 ;-)이 경우 각 구성 요소는 자체 인스턴스를 가지며 동일한 구성 요소를 공유하지 않습니다. 이것은 계층 형 인젝터 때문입니다. –