구성 요소에 각도 2 중복 구독

Question

ngOnDestroy에서 구독 취소 이외의 구성 요소에서 behaviorSubject에 대한 중복 구독을 방지 할 수있는 방법이 있습니까? 지금까지는 observable에 대한 subscription을 작성한 구성 요소를 앞뒤로 탐색 할 때 중복 구독을 피하기 위해 찾은 유일한 방법입니다.

예 :

사용자 서비스

@Injectable() 
export class UserService { 

    constructor(private http: Http) { 
    this.setCurrentUser(); 
    } 

    private currentUser$ = new BehaviorSubject<User>(null); 

    public getCurrentUser(): Observable<User> { 
    return this.currentUser$.asObservable(); 
    } 
    public setCurrentUser(): void { 
    this.getLoggedUser(); // 
    } 


    private getLoggedUser(): void { 

    let getCurrentUserUrl = 'http://127.0.0.1:8000/users/current/' 

    let headers = new Headers({ 
     'Content-Type': 'application/json' 
    }); 
    let options = new RequestOptions({ 
     headers: headers 
    }); 
    options.withCredentials = true; 

    this.http.get(getCurrentUserUrl, options) 
     .map(this.toUser) 
     .catch(this.handleError) 
     .subscribe(
     user => this.currentUser$.next(user), 
     error => console.log("Error subscribing to currentUser: " + error) 
    ); 

    } 

    private toUser(res: Response): User { 
    let body = res.json(); 
    return body || { }; 
    } 

} 

그리고 사용자 서비스에서 관찰에 가입 구성 요소 ...

export class AppComponent implements OnInit, OnDestroy { 

    currentUserSubscription:any; 

    constructor(
    private userService:UserService, 
    private authentificationService:AuthenticationService 
) {} 

    user:User; 

    ngOnInit() { 
    this.currentUserSubscription = this.userService.getCurrentUser().subscribe(
     data => { 
     this.user = data; 
     console.log('Main : ', this.user); 
     } 
    ); 
    } 

    ngOnDestroy() { 
    // I want to avoid writing this for every subscription 
    this.currentUserSubscription.unsubscribe(); 
    } 

} 

내가 구성 요소에 대해 여러 개의 시간을 이동하는 경우, 그것은 여러 번 생성되고 파괴됩니다. 구독은 구성 요소 초기화시마다 만들어 지므로 구성 요소로 삭제해야합니다. 그렇지 않은 경우 다음 구성 요소 초기화시 복제됩니다 ...

ngOnDestroy에서 구독을 삭제하는 방법이 있습니까?

Answer 1

한 번만 구독하려면 템플릿에서 비동기 파이프를 사용해야하므로 비동기 파이프가 자동으로 가입 취소를 관리합니다. 이 방법이 마음에 들면 스마트 구성 요소 및 프레젠테이션 구성 요소로 응용 프로그램을 작성해야합니다. 이것을 확인하십시오 answer

구독을 취소하는 또 다른 방법은 제목을 만들어서 구독이 값을 낼 때까지 구독이 완료되도록하는 것입니다. 항상 구독을 취소해야하며 그렇지 않으면 메모리 누출이 발생합니다.

export class AppComponent implements OnInit, OnDestroy { 

    currentUserSubscription:any; 

    constructor(
    private userService:UserService, 
    private authentificationService:AuthenticationService, 
    private _destroy : Subject() = new Subject(); 
) {} 

    user:User; 

    ngOnInit() { 
    this.currentUserSubscription = this.userService.getCurrentUser() 
    .takeUntil(this._destroy) 
    .subscribe(
     data => { 
     this.user = data; 
     console.log('Main : ', this.user); 
     } 
    ); 
    } 

    ngOnDestroy() { 
    this._destroy.next(); 
    this._destroy.unsubscribe(); 
    } 

}