如何通过2个组件访问相同的服务？

Question

我是角色2的新手。我想使用服务将数据从一个组件传递到另一个组件。我编写了一个主要服务并从component1设置数据并将其提取到另一个component2。它工作正常，但现在我必须再次将数据提取到component3，这次我得到一个未定义的错误。请帮助我，并提前致谢

Answer 1

您需要确保将相同的服务实例注入到三个组件中。

如果在两个不同的位置提供相同的实例，angular将创建该服务的两个不同实例。

正如您所看到的，Angular应用程序是一个组件树，每个组件都有一个提供者数组，angular为providers数组中的每个服务创建一个新实例，并为当前组件及其子组件提供它作为图像描述。
当someComponent在其构造函数中请求服务时，angular会创建一个逐步为父母提供的气泡，并询问他们是否有此服务的实例，这是该服务的第一个实例，即First-Match-Won策略。 /> 所以你需要确保三个组件气泡到达该服务的同一个实例。

Answer 2

简单来说，如果要共享服务的单个实例，请在app.module.ts providers中添加服务，然后在每个组件的构造函数中，您可以注入该服务。

以下是共享服务的示例：

<强> app.service.ts：

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

@Injectable()
export class AppService{
    myGlobalVar;

    constructor(){
      this.myGlobalVar = true;
      console.log("My global variable value: " + this.myGlobalVar);
      alert("My intial global variable value is: " + this.myGlobalVar);
    }

    setMyGV(val: boolean){
      console.log("Setting FV to: " + val);
      this.myGlobalVar = val;
    }

    getMyGV(val: boolean){
      return this.myGlobalVar;
    }
}

<强> app.module.ts：

import { AppService } from './app.service';

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [ HeroService, AppService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

<强> dashboard.component.ts：

import { AppService } from './app.service';

export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(private appService: AppService) { }

   changeGV(val){
    this.appService.setMyGV(val);
  }

  showGV(){
    alert("GV: " + this.appService.getMyGV());
  }

  showGV(){
    alert("GV: " + this.appService.getMyGV());
  }

}

<强> heroes.component.ts：

import { AppService } from './app.service';

export class HeroesComponent implements OnInit {

  constructor(private appService: AppService) { }

  changeGV(val){
    this.appService.setMyGV(val);
  }

  showGV(){
    alert("GV: " + this.appService.getMyGV());
  }
}

Live example