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
         }

LandingService

    import {Injectable} from "@angular/core";

@Injectable()
export class LandingService {
    SearchData:any=[];


}

另外，我使用getter和setter进行了检查，但仍然遇到同样的问题，任何人都可以建议我做错了，因为我正在设置数据和控制台打印出我希望在第二个组件上接收的正确数据，但最终以空数组

Answer 1

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

简短版本：

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

更新你的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的不同对象，每个对应一个组件。由于它们是两个不同的实例/对象，它们每个都有自己的数据。

查看the Angular docs for the dependency injection system了解详情

Answer 2

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

中提供

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

Answer 3

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

如果组件在同一模块中。在该模块（@NgModule）providers内提供服务。如果没有建立共享服务/模块。

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

Angular2数据服务组件未在其他组件上接收值

3 个答案: