Angular2数据服务组件未在其他组件上获得价值 [英] Angular2 Data Service Component not receiving value on Other components

问题描述

当前，我正在使用共享服务将数据从一个组件传递到另一个组件，我在第一个组件上设置了值，并试图在另一端检索值，但是我收到的空数组是我的代码:

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

            }

第二个组件

@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=[];


}

另外，我检查了使用getter和setter的方法，但仍然面临着同样的问题，有人会建议我做错了什么，因为我正在设置数据，并且控制台在第二个组件上打印了我想接收的正确数据，但结尾是空数组

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

推荐答案

问题与您在组件中使用'providers'选项有关.

The issue has to do with your use of the 'providers' option in your component.

简短版本:

从两个单独的组件装饰器中删除providers选项，然后将其添加到包含这些组件(或AppModule)的NgModule中.

remove the providers option from your two individual component decorators, and instead add it to your NgModule containing these components (or your AppModule).

更新您的NgModule:

Update your NgModule:

@NgModule({
   imports: ...
   declarations: ....
   providers: [LandingService],   /// <- add this
})
export class ......

更新您的组件:

@Component({
    templateUrl: './landingPage.component.html',
    styleUrls: ['./landingPage.component.css'],
     ///providers: [LandingService],    // <-- remove this from BOTH components

 })

长版:

将服务添加到组件的providers数组时，基本上是对Angular说，我想要该组件(及其子组件)的此服务的新实例.因此，在您的示例中，您基本上是在告诉Angular您想要两个LandingService类型的不同对象，每个对象一个.而且由于它们是两个不同的实例/对象，所以它们每个都有自己的数据.

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.

查看依赖项注入系统的Angular文档了解更多信息

这篇关于Angular2数据服务组件未在其他组件上获得价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！