Question

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

Answer 1

您需要使用BehaviorSubject实现这一目标。

service.ts

private username = new BehaviorSubject<any>('');
public username$ = this.username.asObservable();

updateUsername(username: string){
   this.username.next(username);
}

登录组件：

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

service.updateUsername('login user');

NavBar组件：

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

Answer 2

您可以为此使用 BehaviorSubject 。

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

import { Observable, BehaviorSubject } from 'rxjs';

private currentUserSubject = new BehaviorSubject<any>({});

为了聆听我们在 currentUserSubject 中创建的更改，我们使用asObservable（）将其更改为可观察。

public currentUser = this.currentUserSubject.asObservable();

在 LoginComponent 中，注入UserService依赖项并发出通过成功登录获取的数据。

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.");
}

currentUser 可观察的所有订阅者都将被告知有关currentUserSubject中的更改的信息。您可以像这样在 NavBarComponent 中订阅此可观察项。

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

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

2 个答案: