Angular2 - Sharing Data Between Components Using Service

Question

I am trying to share data between components using a common shared service. This is the service.

@Injectable()
export class JobService {
    public jobType=null;
    public examples=[];
}

This is my first component. The full code within the component is much too long so I've just added a ... to represent the rest of the code but inside this component the jobType and examples variables of the service are set.

@Component({
            selector: 'app-job',
            templateUrl: './job.component.html'
})
export class JobComponent implements OnInit {

          constructor(private jobService: JobService, private authService: AuthService, private router: Router) {
            }
    ...

}

and the second component is

@Component({
    selector: 'app-preview',
    template:'./preview.component.html'
})
export class PreviewComponent implements OnInit {

    jobType;
    examples;

    constructor(private jobService: JobService) {
    }  
    ngOnInit() {

        this.jobType=this.jobService.jobType;
        this.examples=this.jobService.examples;
    }

}

So the idea is that it should be able to get the jobType and examples variables that were set within the service inside JobComponent.

The service itself is provided in the module file

@NgModule({
    declarations: [
        JobComponent,
        JobListComponent,
        JobDetailsComponent,
        PreviewComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule,
        TabsModule
    ],
    providers: [JobService]
})
export class JobModule {

}

It is my understanding that this means that JobService is instantiated only once and is shared between the components.

The problem arises within the html template of JobComponent. It contains a router link to open the PreviewComponent in a new tab i.e.

<a target="_blank" routerLink="/preview">Preview</a>

When this link is opened, the variables within JobService have already been set in JobComponent (I checked that this is true). The /preview route is associated with PreviewComponent. When the new window opens and PreviewComponents reads the JobService variables, they have not been set which leads me to believe that PreviewComponent has created an entirely new instance of JobService. However, according to Angular2 - Share data between components using services This should not happen if JobService is only provided once in the modules file. Can anyone tell me why the JobService does not seem to be shared across these two components?

Answer 1

It's because you're opening the page in a new window. The state of JobService is not being preserved. A possible solution could be passing the JobService's state to the preview component using url query parameters and rebuilding the service in the new page for example, navigating to /preview?jobType=something&examples=are,comma,separated,list or saving the state in the browser (local storage, cookies, whatever) and reading it on page initialization