伝播にオブザーバブルを使用する方法

Question

Angularを初めて使用しました。私は許可を得ようとしており、次のタスクに直面しています。

フロントエンドからユーザーを取得するサービスがあります。このユーザーをサービス自体に保存したいと思います。これを行うには、checkUser（）関数を使用します。次に、コンポーネントから、この変数にアクセスしたいが、サービスで変更されたときに、コンポーネントによってこれらの変更が受信された。私はObservable（サービスのgetCurrentUser（）関数）を使用することができると考えました。しかし、コンポーネントは何も出てこない。何が間違っているのか、これをどのように実装できるのか教えてください。アドバイスをありがとう。

サービス：

const API_URL = environment.apiUrl; 

@Injectable() 
export class AuthService { 
    // public user: Account; 
    public user: Account; 

    constructor(private http: HttpClient) { 
    this.checkUser(); 
    const intervalId = setInterval(() => { 
     console.log('Auth: ', this.user); 
    }, 2000); 


    } 

    checkUser() { 
    return this.http 
     .get<Account>(API_URL + '/get_user', { withCredentials: true }) 
     .take(1) 
     .subscribe(user => { 
     this.user = user; 
     console.log(this.user); 
     }); 

    } 

    login(user) { 
    this.http 
     .post<Account>(API_URL + '/login', user, { withCredentials: true 
}).take(1) 
     // .catch(this.handleError) 
     .subscribe(response => { 
     console.log('Resp: ', response); 
     this.checkUser(); 
     }); 
    } 


    getCurrentUser(): Observable<Account> { 
    return Observable.of(this.user); 
    } 

    private handleError(error: Response | any) { 
    console.error('ApiService::handleError', error); 
    return Observable.throw(error); 
    } 

} 

コンポーネント：

@Component({ 
    selector: 'app-bs-navbar', 
    templateUrl: './bs-navbar.component.html', 
    styleUrls: ['./bs-navbar.component.css'] 
}) 
export class BsNavbarComponent implements OnInit { 
    // public user$: Observable<Account>; 
    public user: Account; 

    constructor(private authService: AuthService) { 
    const intervalId = setInterval(() => { 
     console.log(this.user); 
    }, 2000); 


    } 

    ngOnInit() { 
    this.authService.getCurrentUser(). 
     subscribe(user => { 
     this.user = user; 
     console.log('Navbar: ', user); 
     }); 

    } 
} 

Answer 1

はSubject程度関心に価値があるかもしれませんか？

サービスコード：

const API_URL = environment.apiUrl; 

@Injectable() 
export class AuthService { 
    private user: Subject<Account> = new Subject(); 

    constructor(private http: HttpClient) { 
     this.checkUser(); 
    } 

    checkUser() { 
     return this.http 
      .get<Account>(API_URL + '/get_user', { withCredentials: true }) 
      .take(1) 
      .subscribe(user => { 
       this.user.next(user); 
      }); 
    } 

    login(user) { 
     this.http 
      .post<Account>(API_URL + '/login', user, { withCredentials: true }) 
      .take(1) 
      .subscribe(response => { 
       this.checkUser(); 
      }); 
    } 

    getCurrentUser(): Observable { 
     return this.user.asObservable(); 
    } 

    private handleError(error: Response | any) { 
     return Observable.throw(error); 
    } 
} 

コンポーネントを変更する必要はありません。