Köşeli 2 singleton hizmeti tekil olarak davranmıyor

Question

TargetService adlı başka bir hizmet var, bu da diğer çeşitli bileşenlere enjekte ediyor. Bu TargetService, Target nesneleri içeren Targets adlı bir özelliğe sahiptir.

Sorunum, bu koleksiyonun başka bir görünüme yönlendirildikten sonra daimi olmasını istemem. Rotalarım gayet iyi çalışıyor, ancak rota değiştiği anda Servis, herhangi bir değişkenin içeriğini kaybeder, temel olarak Hizmeti yeniden başlatır. Anladığım kadarıyla, bu enjekte edilen hizmetler, etrafından geçilebilecek tek kişilik mi olacak?

Aşağıdaki örnekte, TargetIndex üzerinde hizmetin (this.targetService.targets = ts;) Targets[] nesnesini dolduran bir düğmeyi tıklıyorum. İyi çalışıyor, sonra TargetShow sayfasına yönlendiriyorum ve daha sonra bu dizine geri dönüyorum ve şimdi bu Targets[] özelliğinin boş olduğunu, zaten yerleştirdiğim şeyi içermesini istediğimde.

Burada nelerin eksik?

App.Module

const routes: Routes = [ 
    { path: '', redirectTo: 'targets', pathMatch: 'full'}, 
    { path: 'targets', component: TargetIndexComponent }, 
    { path: 'targets/:id', component: TargetShowComponent } 
] 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    TargetComponent, 
    TargetIndexComponent, 
    TargetShowComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    RouterModule.forRoot(routes) 
    ], 
    providers: [TargetService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

TargetService

@Injectable() 
export class TargetService { 
    public targets: Target[]; 

    constructor(private http: Http) {} 

    getTargets(hostname: String): Observable<Target[]> { 
    return this.http.request(`url`).map(this.extractData); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body || []; 
    } 

} 

TargetIndex

@Component({ 
    selector: 'app-targets', 
    templateUrl: './target-index.component.html', 
    styleUrls: ['./target-index.component.css'], 
    providers: [TargetService] 
}) 
export class TargetIndexComponent implements OnInit { 
    loading = false; 

    constructor(private http: Http, private targetService: TargetService) {} 

    loadTargets(hostname: HTMLInputElement) { 
    this.loading = true; 
    this.targetService.getTargets(hostname.value) 
    .subscribe((ts: Target[]) => { 
     this.targetService.targets = ts; 
     this.loading = false; 
    }) 
    } 

    ngOnInit() { 
    } 

} 

zaten modül sağlayıcılar bunu ekledi neden

@Component({ 
    selector: 'app-target-show', 
    templateUrl: './target-show.component.html', 
    styleUrls: ['./target-show.component.css'], 
    providers: [TargetService] 
}) 
export class TargetShowComponent implements OnInit { 
    id: string 

    constructor(private route: ActivatedRoute, private targetService: TargetService) { 
    route.params.subscribe(params => { this.id = params['id']; }) 
    } 

    ngOnInit() { 
    } 

} 

Answer 1

deneyin, bileşenler sağlayıcılardan TargetService kaldırmak TargetShow. Bu hizmeti bileşen sağlayıcılarına eklediğinizde, DI yeni örneklerini oluşturur.

NgModule kullanmak ve ne zaman bir uygulama bileşeni: Burada

https://angular.io/docs/ts/latest/guide/dependency-injection.html den alıntıdır? Bir taraftan, bir NgModule'deki bir sağlayıcı, kök enjektörüne kaydedilir. Bu, bir NgModule 'a kayıtlı her sağlayıcının tüm uygulamada erişilebilir olacağı anlamına gelir. Diğer taraftan, başvuru bileşeninde kayıtlı bir sağlayıcı yalnızca bu bileşende ve tüm çocuklarında kullanılabilir.