【问题标题】:Angular Subscription is not call on NextAngular Subscription 不调用 Next
【发布时间】:2021-05-04 15:11:39
【问题描述】:

我正在尝试实现自动登录系统,我将登录数据保存到 localStorage,以便在刷新时从本地存储中获取数据 当我从本地存储中获取数据时,我使用 Subject 来发出该数据,以便在标题组件中订阅数据并在刷新时维护应用程序状态

现在刷新我的自动登录功能正在调用,但订阅没有在标题组件中调用

验证服务代码

    autoLogin(){
    const userdata: {
        email:string;
        id: string;
        _token:string;
        _tokenExpairDate:Date;
    }=JSON.parse(localStorage.getItem('userData'));
    if(!userdata){
      return;
    }
    console.log("Auto Login Call");
    
    const loadedData=new User
    (
      userdata.email,
      userdata.id,
      userdata._token,
      new Date
      (
        userdata._tokenExpairDate
      )
    );
    if(loadedData.token){
      console.log(loadedData);
      console.log("data Emmit");
      this.user.next(loadedData);
    }
    else{
      console.log("data Not Emmit");
    }
 }

头组件代码

ngOnInit(){
    this.userSub=this.auth.user.subscribe(user=>{
      console.log("Subscription Call");
      this.isLogin=!user? false:true;
    })
  }

【问题讨论】:

  • 您能否提供代码,以便在模块中“注册”您的 AuthService
  • @Injectable({ providedIn: 'root' }) 导出类 AuthServiceService {
  • 你也把它放在providers部分的任何地方吗?
  • 现在不,但我也在 app.modules 中尝试过
  • console.log("Subscription Call"); 正在执行吗?

标签: angular observable behaviorsubject


【解决方案1】:

我不确定您实际上是如何设置可观察的,但这可能会对您有所帮助。

// In user.modal.ts export a interface for the user
// You need to define this so that you dont need to repeat your code

export interface User {
    email:string;
    id: string;
    _token:string;
    _tokenExpairDate:Date;
}
************************************
// In your service file, do this: 

import { User } from './user.modal.ts';

let initialUserDetails: User = {};

private userDetailsSource: BehaviorSubject<User> = new BehaviorSubject<User>(this.initialUserDetails);

public userDetailsObservable: Observable<User> = this.userDetailsSource.asObservable();

setUserDetails(userDetails: User) {
    this.userDetailsSource.next(userDetails);
}

getUserDetails(): Observable<User> {
    return this.userDetailsObservable;
}

********************************
// In your component.ts file, whenever you want to set the details: 

if (loadedData.token) {
    console.log(loadedData);
    console.log("data Emmit");
    this.user.next(loadedData); // Dont do this:

    this.yourServiceName.setUserDetails(loadedData); // Do this;
}


// Whenever you want to get the details of the Observable, you can do this: 

this.yourServiceName.getUserDetails().subscribe(subscribedData => {
    console.log('Latest Observable Data =>', subscribedData);
})

【讨论】:

  • 请注意,使用 BehaviorSubject,当您订阅它时,您可能会收到初始化值(此处为 {}),然后收到带有真实数据的第二个事件。所以你应该在订阅中添加一个检查。这就是为什么我们经常使用null作为init值的原因,所以很容易忽略。
猜你喜欢
  • 1970-01-01
  • 2019-08-27
  • 1970-01-01
  • 1970-01-01
  • 2020-10-31
  • 1970-01-01
  • 2017-03-18
  • 2018-02-26
  • 2022-12-02
相关资源
最近更新 更多