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
         }

登陆服务

    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 选项，而是将其添加到包含这些组件的 NgModule(或您的 AppModule)中.

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屋！