Angular 5 Service as singleton

Question

저는 Angular 5 싱글 톤 서비스를하고 있습니다. 내 의견으로는 가이드 라인에 따라 모든 것을했지만, 불행히도 내 서비스는 싱글 톤이 아닙니다. 각 구성 요소에는 서비스 인스턴스가있는 것 같습니다. 내 코드는 다음과 같습니다

응용 프로그램 모듈 :

import { StarService } from './star-service/star-service' 
import { StarSearchComponent } from './star-search/star-search.component' 
import { StarReportComponent } from './star-report/star-report.component'; 
@NgModule({ 
imports: [ 
BrowserModule, 
    FormsModule, 
    AppRoutingModule 
], 
declarations: [ 
AppComponent, 
StarSearchComponent, 
StarReportComponent 
], 
providers: [StarService 
], 
bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

서비스 :

import { Injectable } from '@angular/core'; 
import { log } from 'util'; 
@Injectable() 
export class StarService { 
public Param: string; 

constructor() { 
this.Param = "Not Set"; 
console.log("Service Instance created"); 
} 
} 

별 보고서 구성 요소

import { Component, OnInit } from '@angular/core'; 
import { StarService } from '../star-service/star-service' 
@Component({ 
    selector: 'app-star-report', 
    templateUrl: '<p>{{getReport}}</p>', 
    styleUrls: ['./star-report.component.css'] 
}) 
export class StarReportComponent implements OnInit { 

    constructor(private starService: StarService) { } 
    ngOnInit() { 
    this.starService.Param = "Report"; 
} 

get getReport(): string 
    { 
    return this.starService.Param; 
    } 
} 

별 검색 구성 요소

import { Component, OnInit } from '@angular/core'; 
import { StarService } from '../star-service/star-service' 

@Component({ 
selector: 'app-star-search', 
templateUrl: './star-search.component.html', 
styleUrls: ['./star-search.component.css'] 
}) 
export class StarSearchComponent implements OnInit { 
    constructor(private starService: StarService) { } 
ngOnInit() { 
    } 
get getSearch(): string 
{ 
    return this.starService.Param; 
} 
} 

그리고 지금, 내 콘솔을 표시 할 때마다 나는 요소를 전환하고있어 "서비스 인스턴스 생성". 또한 각 구성 요소는 잘못된 텍스트를 표시합니다. 필자는 StarReportComponent가 생성 될 때 starService.Param = "Report"를 전환하고 그대로 유지합니다. 불행하게도 StarSearchComponent를 호출하면 기본값 "Not Set"가 표시됩니다. 왜? 왜 싱글 톤이 여기서 작동하지 않습니까? 감사합니다.

Answer 1

귀하의 서비스에 static 속성을 입력하십시오. 그렇지 않으면 예상대로 작동합니다. 당신이 전반에 걸쳐 서비스 싱글의 속성을 확인하려면 아 미안, 당신의 질문을 다시 읽기, 그것은 작동하고 있어요

,

export class StarService { 

static _param: string; 

// use getters and setters to access them from your instantiated service objects from within various components 
get Param() { return StarService._param; } 

set Param(param: string) { StarService._param = param; } 

} 

편집, 서비스에 다음과 같이 선언 예상대로 서비스의 생성자에 this.Param = "Not Set";이 있으므로 구성 요소간에 전환 할 때마다 (구성 요소의 생성자 인수를 통해) 구성 요소에서이 싱글 톤 서비스의 인스턴스화를 다시 강제 실행합니다. 그러면 서비스의 생성자가 다시 호출되고 따라서 Param의 값을 "Not Set"으로 되돌립니다. 말이된다?

EDIT-2

댓글에 응답, 그것 (구성 요소의) 생성자를 통해 이루어 구성 요소로 서비스의 dependency injection 때문이다. 이와 같은 서비스를 주입 요컨대

, 상기 docs 당

constructor(private starService: StarService) { } 

,

바이더 생성하거나 서비스를 제공 할 수있는 무언가이다. Angular는 new을 사용하여 클래스 공급자로부터 서비스 인스턴스를 만듭니다.

는 후드, 서비스의 생성자를 호출합니다

private starService = new StarService(); 

을에 private starService 속성을 지정합니다.

서비스가 삽입 될 때마다 기본 동작을 수행하지 않으려면 해당 서비스 생성자 내에서 속성 할당을 수행하지 마십시오.

그리고 경로를 통해 구성 요소를 전환 할 때마다 해당 구성 요소는 생성자와 해당 구현 된 lifecycle hooks을 호출하여 만들어집니다. 따라서 생성자 내에서 정의 된 해당 종속성도 생성합니다. 희망은 지금 이해가 되네.

Answer 2

나는 꽤 오랫동안이 문제로 어려움을 겪고있었습니다. 나는 싱글 톤을 갖고 싶었고, 한 링크에서 다른 링크로 라우팅 될 때마다, 싱글 톤이 될 것으로 예상되는 서비스가 재창조되었습니다.

에서 :

<a href="/customers">Customers</a>

사람 : 내가 사용을 제거하는 싱글에 각 문서의 링크를 포크 한

<a routerLink="/customers">Customers</a>

마지막 해결책은 탐색 링크를 변경했다 이것이 문제를 유발하지 않는다는 것을 증명하기 위해 commonmodule과 sharedmodule을 사용합니다. commonmodule과 sharedmodule을 사용하면 모듈이 더 모듈화됩니다.

https://stackblitz.com/edit/angular-uxbbdx

나는 예와 유사한 지연로드 모듈을 가지고있다. 이 방법으로 문제가 해결되지 않으면 알려주세요. 나는 꽤 많은 시간 동안이 문제로 놀았으며 아마 문제를 다시 만들어 도움을 줄 수있을 것이다.