전파에서 관측 자료를 사용하는 방법

Question

각도를 처음 사용했습니다. 승인을 얻으려는 중이며 다음 작업을 수행했습니다.

프론트 엔드에서 사용자를 가져 오는 서비스가 있습니다. 이 사용자를 서비스 자체에 저장하려고합니다. 이렇게하려면 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); 
    } 
} 

구성 요소를 변경할 필요가 없습니다.