Angular 2 服务在子组件中不能作为单例运行（可能重复）

Question

第二次更新

我的问题在于服务本身，将方法更改为箭头函数解决了问题。

---

这可能是重复的，但我已经对 Angular DI 进行了详尽的研究，很明显，在根级别注入服务可以使它们作为同一个实例提供给应用程序中的所有组件。

在我的 AppComponent 下，我有三个子屏幕截图、确认和预览。我从 Screenshot 组件调用服务并在该服务上保存一些数据，然后尝试稍后从 Preview 组件访问该数据，但似乎我正在访问该服务的新实例。

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
    ...
    }
}

为避免代码过于冗长，我将省略服务和其他首先调用它但可以在需要时发布的子组件。

更新

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

我的问题在于服务方法。我将它们更改为箭头函数，它解决了所有问题。