Angular 2 Service nicht als Singleton in Kindern Komponente (möglich Duplikat)

Question

zweite Update war

Mein Problem in dem selbst Dienst funktioniert, die Methoden zu ändern Funktionen Pfeil das Problem gelöst.

---

Dies könnte eine Wiederholung sein, aber ich habe umfassende Forschung auf Angular DI getan, und es ist klar, dass die Injektion Dienste auf der Stammebene, sich als die gleiche Instanz für alle Komponenten in einer App zur Verfügung stellen.

Unter meiner AppComponent habe ich drei Kinder Screenshot, Confirm und Preview. Ich rufe einen Dienst von der Screenshot-Komponente an und speichere einige Daten zu diesem Dienst, versuche dann später über die Vorschau-Komponente auf diese Daten zuzugreifen, aber anscheinend greife ich auf eine neue Instanz dieses Dienstes zu.

app.module

@NgModule({ 
    declarations: [ 
    AppComponent, 
    Screenshot, 
    Confirm, 
    Preview, 
    ], 
    entryComponents: [ 
    Preview 
    ], 
    imports: [ 
    CommonModule, 
    BrowserModule 
    ], 
    providers: [ 
    MessageService, 
    ScreenshotService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit, OnChanges, OnDestroy { 
    @ViewChild(Preview) preview: Preview; 

    title: string; 
    confirmed: boolean; 
    constructor(
     private screenshotService: ScreenshotService, 
     private messageService: MessageService, 
    ) { 
     this.title = 'Media Radar'; 
     this.confirmed = false; 
    } 

    onNotify(confirm): void { 
     this.confirmed = confirm; 
     if(this.confirmed) { 
      this.preview.showPreview(); 
     } 
    } 
    ... 
} 

app.component.html

<div class='popup'> 
    <h3>{{ title }}</h3> 
    <screenshot [hidden]="confirmed" (showConfirm)='onNotify($event)'></screenshot> 
    <confirm [hidden]="!confirmed" (hideConfirm)='onNotify($event)'></confirm> 
    <preview [hidden]="!confirmed"></preview> 
</div> 

preview.component

import { ScreenshotService } from './screenshot.service'; 
@Component({ 
    selector: 'preview', 
    template: `<canvas #preview></canvas>` 
}) 

export class Preview { 
    @ViewChild('preview') preview: ElementRef; 
    private canvas: HTMLCanvasElement; 
    constructor(
     private screenshotService: ScreenshotService, 
     private renderer: Renderer2 
    ) {} 

    showPreview() { 
     console.log(this.screenshotService) // shows a new instance with no data 
    ... 
    } 
} 

mit Code immer zu lange zu vermeiden, werde ich den Service und die andere untergeordnete Komponente auslassen, die es zuerst ruft aber veröffentlichen können, wenn nötig.

UPDATE

screenshot.service

import { Injectable } from '@angular/core'; 

@Injectable() 
export class ScreenshotService { 
    public imageURL: string = ''; 
    public title: string = ''; 
    public height: number = 0; 
    public width: number = 0; 

    constructor() { 
    } 
    convertToBlob(): Promise<any> { 
     console.log(this); // returns all the initial values above when called from the Preview component the second time despite being previously assigned values when a different method was called from a different service 
    } 
    ... 
} 

Answer 1

war mein Problem in den Service-Methoden. Ich habe sie in Pfeilfunktionen geändert und es hat alles gelöst.