Angular Сервис для обмена строкой из компонента приложения с другими компонентами

Question

Как отправить строку из app.component.ts в службу, и чтобы служба отправила эту строку компоненту.

Я использую Amplify Authentication и получаю строку authstatus, чтобы сообщить мне если пользователь вошел в систему. Я хочу поделиться этим статусом с другими компонентами. Это моя попытка создания сервиса, но нужна помощь. Я отправляю строку из app.component.ts и пересылаю ее из сервиса на auth.component и другие.

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

@Injectable({
  providedIn: 'root'
})
export class AuthStatusService {

  authStatus: string;

  authStatusChange: Subject<string> = new Subject<string>();

  constructor()  {
      this.authStatusChange.subscribe((value) => {
          this.authStatus = value
      });
  }

}```

Answer 1

Вам нужно pu sh значение наблюдаемого. authStatus переменная пренебрежимо мала. Попробуйте следующее

AuthStatusService

export class AuthStatusService {
  authStatusChange: Subject<string> = new Subject<string>();

  constructor() { }

  public getAuthStatus(): Observable<string> {
    return this.authStatusChange.asObservable();
  }

  public setAuthStatus(status: string) {
    this.authStatusChange.next(status);
  }
}

app.component.ts

login() {
  this.service.login().subscribe(
    response => {
      // handle login
      this.authStatusService.setAuthStatus(response.status);
    },
    error => {
      // handle error
    }
}

child.component.ts

ngOnInit() {
  this.authStatusService.getAuthStatus().subscribe(
    status => {
      // got login status
    }
  );
}

Таким образом, каждый дочерний компонент будет получать статус входа в систему каждый раз, когда из компонента приложения будет выдвигаться новый статус входа в систему.

Answer 2

Простым решением будет использование сервиса в качестве хранилища для хранения AuthStatus. Найдите решение ниже:

В вашем сервисе объявите одну личную переменную и напишите для нее методы получения и установки, как показано ниже:

private authStatus :string;

//this method will be called for updating value of authstatus
setAuthStatus(value : string){
this.authStatus = value;
}

//you can fetch this method from any compononent to get the value of authstatus
getAuthStatus(){
return this.authStatus;
}

В вашем случае

in app.component.ts вызывает setAuthStatus метод и устанавливает значение

this.service.setAuthStatus("your value");

в других компонентах, вызывает getAuthStatus метод и извлекает значение

let authStatus = this.service.getAuthStatus();