Angular2 数据服务组件没有收到其他组件的价值

Question

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

**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 进行了检查，但仍然面临同样的问题，任何人都可以告诉我我做错了什么，因为我正在设置数据并且控制台打印出我想要的正确数据在第二个组件上接收但以空数组结尾

Answer 1

您的提供者不是单身人士。您在每个组件中单独提供服务，因此它们具有该服务的单独实例。

如果组件在同一个模块中。在该模块 (@NgModule) providers 内提供服务。如果不共享service/module.

示例：https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

Answer 2

您已将 LandingService 设置为两个组件中的提供商。所以它不是单例服务。您应该在 app.module.ts

中提供

@NgModule({
  //declarations,imports etc
  providers: [LandingService]
})
export class AppModule { }

Answer 3

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

短版：

从你的两个单独的组件装饰器中删除 providers 选项，并将其添加到包含这些组件的 NgModule（或你的 AppModule）。

更新您的 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

 })

长版：

当您将服务添加到组件的提供程序数组时，您基本上是在告诉 Angular，我想要此组件（及其子组件）的此服务的新实例。因此，在您的示例中，您基本上是在告诉 Angular 您需要两个 LandingService 类型的不同对象，每个组件一个。由于它们是两个不同的instances/objects，它们将各自有自己的数据。

查看 the Angular docs for the dependency injection system 了解更多信息

Angular2 数据服务组件没有收到其他组件的价值

Angular2 Data Service Component not receiving value on Other components

angular

angular2-services