Angular Service将字符串从App组件共享到其他组件

时间:2020-04-29 17:59:41

标签: angular

如何将字符串从app.component.ts发送到服务,并让服务将字符串发送到组件。

我正在使用Amplify Authentication并获取authstatus字符串来告知用户是否已登录。我想与其他组件共享此状态。这是我尝试创建服务的尝试,但需要帮助。我正在从app.component.ts发送字符串,并将其从服务转发到auth.component和其他人。

def draw_from_file(name):
   with open(name) as file:

2 个答案:

答案 0 :(得分:2)

一个简单的解决方案将使用服务作为存储AuthStatus的存储。 请找到以下解决方案:

在您的服务中声明一个私有变量,并在服务中为其编写getter和setter,如下所示:

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;
}

就您而言,

在app.component.ts中

调用 setAuthStatus 方法并设置值

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

在其他组件中调用 getAuthStatus 方法并获取值

let authStatus = this.service.getAuthStatus();

答案 1 :(得分:2)

您需要将值推送到可观察值。 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
    }
  );
}

这样,每当从应用程序组件中输入新的登录状态时,每个子组件都将获得登录状态。