首页 文章

Angular 2在组件中重复订阅

提问于
浏览 次
2

有没有办法避免在除了取消订阅ngOnDestroy中的组件之外的组件中的behaviorSubject上进行重复订阅？到目前为止，这是我发现避免重复订阅的唯一方法，即在我在可观察对象上创建订阅的组件上来回导航 .

例：

用户服务

@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 || { };
  }

}

并且订阅了来自用户服务的observable的组件......

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中清理订阅？

angular observable

1 回答

  • 3

    如果您只想在模板上使用异步管道一次订阅，异步管道将自动管理取消订阅 . 如果您喜欢这种方法，则需要使用智能组件和表示组件组合您的应用程序 . 检查一下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();
  }

}
    回复于

相关问题