如何存储字符串变量并在任何其他 Angular 6 组件中使用它?

Question

例如，我有我的登录组件和包含我的导航栏的主应用程序组件。我希望每当用户成功登录时，将用户名发送到应用程序组件，而不是在导航栏中"登录"中播放，而是显示从我的登录组件发送的用户名。

Answer 1

您需要使用 BehaviorSubject 来实现此目的。

服务.ts

private username = new BehaviorSubject<any>('');
public username$ = this.username.asObservable();
updateUsername(username: string){
this.username.next(username);
}

登录组件：

登录成功后，调用服务并发送用户名

service.updateUsername('login user');

导航栏组件：

ngOnInit(){
this.service.username$.subscribe((username)=>{
// username
});
}

Answer 2

你可以使用BehaviorSubject。

假设您有一个名为UserService的服务。在用户服务中 创建 BehaviorSubject 的实例。

import { Observable, BehaviorSubject } from 'rxjs';
private currentUserSubject = new BehaviorSubject<any>({});

为了监听我们创建的currentUserSubject中的更改，我们使用asObservable((将其更改为可观察的。

public currentUser = this.currentUserSubject.asObservable();

在 登录组件中，注入用户服务依赖项并发出您从成功登录中获得的数据。

constructor(private userService:UserService){}
login(){
//make api call
//if successful login, then emit the user data returned from API call
this.userService.currentUserSubject.next("value we want to emit.");
}

当前用户可观察对象的所有订阅者都将收到有关当前用户主体更改的通知。您可以像这样在导航栏组件中订阅此可观察量。

constructor(private userService:UserService){}
OnInit(){
this.userService.currentUser.subscribe((value)=>{
console.log(value);//value emitted from observable.
})
}