I'm experimenting with data sharing between components using a shared service. Here is the service:
@Injectable()
export class JobService {
public jobType=null;
public examples=[];
}
My first component sets the jobType and examples variables of the service, but due to length constraints, I will only show a snippet of the code here:
@Component({
selector: 'app-job',
templateUrl: './job.component.html'
})
export class JobComponent implements OnInit {
constructor(private jobService: JobService, private authService: AuthService, private router: Router) {
}
...
}
The second component retrieves these variables:
@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;
}
}
Both components are part of the same module, where the Service is provided:
@NgModule({
declarations: [
JobComponent,
JobListComponent,
JobDetailsComponent,
PreviewComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule,
TabsModule
],
providers: [JobService]
})
export class JobModule {
}
However, despite ensuring that the Service is instantiated once, I am encountering issues with variable sharing when navigating from JobComponent to PreviewComponent. Any insights on why the service variables are not being shared as expected?