问题
currently I am using Shared services to pass data from one component into other i set the value on first component and trying to retrieve value on other end, but I am receiving empty array here is my code:
**Ist Compnent:**
@Component({
templateUrl: './landingPage.component.html',
styleUrls: ['./landingPage.component.css'],
providers: [LandingService],
})
export class LandingPageComponent {
constructor(private landingService:LandingService) {
}
@Input() Location:string;
@Input() Type:string;
search(){
//setting value in landing service
this.landingService.SearchData[0]=this.Location;
this.landingService.SearchData[1]=this.Type;
console.log(this.landingService.SearchData) ///this print the data succesfully but when try to access on
// 2nd compnent receive and empty arrat
}
2nd Component
@Component({
templateUrl: 'find.component.html',
styleUrls: ['find.component.css'],
providers: [find,LandingService]
})
export class IndexComponent implements OnInit {
searchData:Object=[];
constructor(private landingService: LandingService) {
}
ngOnInit() {
this.searchData=this.landingService.SearchData; .// getting data of my landing servie that i have set in first component
console.log(this.searchData);//getting empty array
}
LandingService
import {Injectable} from "@angular/core";
@Injectable()
export class LandingService {
SearchData:any=[];
}
Plus i checked using getter and setter but still facing the same issue can any one suggest me what i am doing wrong as I am setting data and console prints the right data that i want to receive on the 2nd component but ends with an empty array
回答1:
The issue has to do with your use of the 'providers' option in your component.
The short version:
remove the providers option from your two individual component decorators, and instead add it to your NgModule containing these components (or your AppModule).
Update your NgModule:
@NgModule({
imports: ...
declarations: ....
providers: [LandingService], /// <- add this
})
export class ......
Update your components:
@Component({
templateUrl: './landingPage.component.html',
styleUrls: ['./landingPage.component.css'],
///providers: [LandingService], // <-- remove this from BOTH components
})
The long version:
When you add a service to the providers array of your component, you're basically saying to Angular, i want a new instance of this service for this component (and its children). So, in your example, you're basically telling Angular that you want two different objects of type LandingService, one for each of your components. And since they are two different instances/objects, they will each have their own data.
Check out the Angular docs for the dependency injection system to learn more
回答2:
You have set LandingService as providers in both components. So it is not a singleton service. You should provide it in the app.module.ts
@NgModule({
//declarations,imports etc
providers: [LandingService]
})
export class AppModule { }
回答3:
Your providers are not singletons. You are providing the service seperately in each component hence they have seperate instances of that service.
If the components are in the same module. Provide the service inside that modules (@NgModule) providers. If not make a shared service/module.
Example: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module
来源：https://stackoverflow.com/questions/42716369/angular2-data-service-component-not-receiving-value-on-other-components