3

I'm trying to build a shared service in an Angular 4 application, and am not able to maintain state for a variable.

I've created a Shared Service component with a public variable called showUpdateMessage which I want to set to true when a record has been saved:

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

@Injectable()
export class SharedService {
    public showUpdatedMessage: boolean;

    constructor() {

    }

}

I then have an EditPerson component with a function that updates my SharedService :

@Component({
    selector: 'person-edit',
    templateUrl: './person-edit.html',
    providers: [PersonService, SharedService]
})
export class PersonEditComponent {
    person: Person;
    constructor(
        private personService: PersonService,
        private sharedService: SharedService)
    {
    }

}


save(): void {
    this.personService.updatePerson(this.person)
        .then(() => {
            this.router.navigate(['/admin/person']);
            this.sharedService.showUpdatedMessage = true;
        }
    );
}

And then finally I have my PersonDetail component which looks to see whether showUpdateMessage is true:

export class PersonDetailComponent implements LoggedInCallback {
    person: Person;
    constructor(
        private personService: PersonService,
        private sharedService: SharedService)

    }

    ngOnInit(): void {
        console.log(this.sharedService.showUpdatedMessage)
    }

    ngOnDestroy() { 
        this.sharedService.showUpdatedMessage = false;
    };
}

My problem is that when I click Save on the EditComponent, ShowUpdateMessage is true, but reverts to Undefined when the PersonDetailComponent is loaded

Update

Here is my app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component";
import {PersonDetailComponent} from "./secure/people/person-detail.component";
import {PersonEditComponent} from "./secure/people/person-edit.component";

@NgModule({
    declarations: [
        PersonDetailComponent,
        PersonEditComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
    ],
    providers: [
        SharedService],

    bootstrap: [AppComponent]
})
export class AppModule {
}
Evonet
  • 3,600
  • 4
  • 37
  • 83
  • How are the modules set up for this? Are you definitely getting the same instance of the service? – 0mpurdy Aug 02 '17 at 22:42
  • I assume I'm not, but not sure how to make sure I do! I've set the service up as a provider in my app.module file and the other modules as standard declarations – Evonet Aug 02 '17 at 22:45
  • 1
    Could you post the relevant module files? [This question](https://stackoverflow.com/questions/34929665/angularjs-2-multiple-instance-of-service-created) may help. Pay particular attention to the part of the accepted answer that mentions lazy loading – 0mpurdy Aug 02 '17 at 22:47
  • 1
    Make SharedService part of your module providers. You dont need to specify it in your component providers. – FAISAL Aug 02 '17 at 22:49
  • I've updated the question. @Faisal I have it as part of the providers, what do you mean don't specify it in my component providers? – Evonet Aug 02 '17 at 22:51
  • 2
    Oh I see! If I remove it from the component provider then it works! – Evonet Aug 02 '17 at 22:53
  • 2
    In your @component, remove it from the providers. The shared service can work as singleton. Putting it here will declare it twice, once in the module and once in the component, hence your problem of undefined – FAISAL Aug 02 '17 at 22:56
  • https://angular.io/guide/hierarchical-dependency-injection – Paul Samsotha Aug 02 '17 at 22:56
  • And why `SharedService` both in module and component `providers`. You should read the Angular docs chapter on Dependency Injection so you're not just guessing about what you should and shouldn't do. DI has it's nuances in Angular that you need to understand, or else you will keep facing problems like this – Paul Samsotha Aug 02 '17 at 22:59
  • Can whoever has the most correct answer in the comments transfer your answer to the Answer section so it can be accepted, otherwise it's going to be impossible to find for other people who may have the same issue in the future. – Stephen R. Smith Aug 02 '17 at 23:17

0 Answers0