각도 2 다른 서비스에서 변경 내용을 감지합니다.

Question

나는 실제 사용자 데이터와 로그인 방법이 포함 된 AuthService가 있습니다. '로그인 버튼'을 클릭하면 서버에서 새 사용자 데이터를 가져오고 'this.user'값을 다시 쓸 AuthService를 호출합니다.

그래서 헤더에 사용자 이름을 표시합니다.

질문 : AuthService의 this.user가 변경되었다는 것을 내 HeaderComponent에서 어떻게 알 수 있습니까?

Answer 1

음, Observable을 AuthService에 노출시킬 수 있습니다. 그러면 HeaderComponent에서이 스트림을 구독 할 수 있습니다. RxJS Subject 클래스를 확장하는 EventEmitter 클래스를 사용할 수 있습니다. 또한 TypeScript 설정기를 사용하여 변경 사항에 대한 이벤트를 자동으로 트리거 할 수 있습니다.

@Injectable() 
export class AuthService { 
    private _user: any; 
    userStream: EventEmitter<any>; 


    constructor() { 
     this.userStream = new EventEmitter(); 
    } 

    //code ... 

    getUserData() { 
     //call our setter 
     this.user = newData; 
    } 

    set user(newValue) { 
     this._user = newValue; 
     //set user data and emit a value in the userStream 
     this.userStream.emit(newValue); 
    } 
} 

그런 다음 당신이 당신의 구성 요소 서비스를 사용할 수 있습니다 :

@Component({...}) 
export class HeaderComponent { 
    currentUser: any; 

    constructor(private authService: AuthService) { 
     //subscribe to the stream to be notified when user data has changed 
     authService.userStream.subscribe((newUser) => { this.currentUser = newUser; }); 
    } 
} 

그래서 당신은 당신의 사용자 데이터에 변화를들을 수있을 것 같은 그래서, 당신의 코드가 보일 것입니다.