구성 요소 간의 각도 공유 서비스가 작동하지 않습니다.

Question

내 변수를 선언하는 서비스가 있습니다. 내 구성 요소에이 변수를 사용하여 데이터를 입력합니다.

서비스 :

@Injectable() 
export class DataService { 

    public msgs = []; 

    constructor() { }  

} 

지금 내 구성 요소에서이 변수를 사용

export class MessagesComponent implements OnInit { 

    constructor(private dataService: DataService){} 

    ngOnInit() { 
     this.getData(); 
    } 

    getData(){ 
     let msgs = []; 

     if (diffr <= this.geomessage[i].range) { 
      this.geomessage[i].dist = diffr; 
      msgs.push(this.geomessage[i]); 
      //console.log("this message: ", this.geomessage[i]); //DEBUG 
     } 
     this.dataService.msgs = msgs; 

    }  
}  

내가에만이 잘 작동 메시지로 가득 필요한 code.The this.dataService.msgs 노한를 기록했다. 내가 다른 구성 요소에 도착했을 때 this.dataService.msgs의 데이터가 여전히 존재하지만 다시 얻을 때까지 Messagescomponentthis.dataService.msgs은 undefined입니다. 다시 채울 때까지 그 데이터가 필요합니다. 누군가 이것을하는 방법을 알고 있습니까?

들으

Answer 1

당신이 당신의 @Component 주석의 제공 배열 안에 당신의 DataService을 제공하는 경우,

@Component({ 
    ... 
    providers: [DataService], 
})... 

싱글이 될 것입니다이 서비스는이 구성 요소에 대한 (그것은 새로운 인스턴스를 생성합니다)

(그리고 자녀가 주석을 첨부하여이 서비스를 제공하지 않은 경우 자녀가됩니다.)

이 서비스를 여러 구성 요소에서 사용하고 동일한 서비스 인스턴스를 공유하려는 경우; DI 트리에서이 구성 요소의 부모 인 구성 요소/모듈에이 서비스를 제공해야합니다. 이 서비스가 글로벌 서비스 인 경우 만 AppModule (또는 공유 모듈)에 제공하는 것이 좋습니다.

@NgModule({ 
    providers:[DataService] 
}) 

Answer 2

echonax의 답변에 대한 빠른 설명은 공급자가 계층 구조로 작동한다는 것입니다. app-module에 추가하면 전체 앱에서 작동하므로 다른 곳에서는 '제공'해서는 안됩니다. 그러나 '글로벌하게'서비스가 필요하지 않으면 상위 구성 요소에 제공하십시오.