Как использовать один и тот же экземпляр внедренного сервиса для разных компонентов в Angular? - PullRequest
Новая
       6

Как использовать один и тот же экземпляр внедренного сервиса для разных компонентов в Angular?

0 голосов
/ 13 марта 2020

В настоящее время я пытаюсь получить доступ к значению переменной в сервисе в реальном времени из разных компонентов.

В моем сервисе у меня есть: 

export class ServiceA {
  serviceVar = "hello";

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.serviceVar
  }

  setServiceVar(newVar){
    this.serviceVar = newVar;
  }

в компоненте AI: 

export class ComponentA implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from A")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }
}

в компоненте BI есть: 

export class ComponentB implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from B")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }

}

в app.module.ts 

providers: [ServiceA]

Если я установлю переменную в ComponentA, я бы хотел, чтобы переменная ServiceA обновлялась таким образом, чтобы, если ComponentB попытался получить () это значение, он получил значение, которое Компонент А обновил сервис с. По сути, наличие ComponentA и ComponentB, использующих один и тот же экземпляр службы.

В настоящий момент происходит то, что существует 2 экземпляра ServiceA, и когда ComponentA выполняет setVar (), изменение применяется только к экземпляру ComponentA службы, а не экземпляру службы ComponentB.

Ответы [ 2 ]

0 голосов
/ 13 марта 2020

Ответ заключается в том, чтобы сделать вашу Службу провайдером, как я сделал в моем вопросе ... НО также убедитесь, что вы удалили 

@Injectable({
  providedIn: 'root'
})

и изменили его на просто: 

@Injectable()

в верхней части вашего сервиса:)

0 голосов
/ 13 марта 2020

Я вижу, что ваш код полностью правильный, так как вы зарегистрировали сервис app.module.ts. Таким образом, будет единичный экземпляр службы.

Единственное, что вам нужно исправить, - это класс службы, в который необходимо добавить свойство с именем spreadsheetID. strong text 

export class ServiceA {
  serviceVar = "hello";
  spreadsheetID

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.spreadsheetID
  }

  setServiceVar(newSpread){
    this.spreadsheetID = newSpread;
  }
...