Угловой запрос на 2 секунды для наблюдения

Question

У меня есть служба, которая предоставляет мне возможность наблюдать через запрос на получение http и следующую операцию с картой. В моем компоненте я подписываюсь на наблюдаемый в методе ngOnInit. Поскольку у меня есть функциональность разбиения на страницы, я хотел бы запустить другой запрос службы, когда пользователь нажимает на другую страницу страницы. Как я могу это достичь? Должен ли я снова подписываться на услугу в новом методе или можно инициализировать наблюдаемый внутри компонента, чтобы я мог использовать его любым способом?

export class ListItemsComponent implements OnInit { 
    private _listItems = []; 
    page = 1; 
    constructor(private _listItemsService:ListItemsServiceService) { } 

    ngOnInit() { 
    this._listItemsService.getListItems (this.page) 
    .subscribe(listItems => this._listItems = listItems); 
    } 

    pageChange(page){ 
    this._listItemsService.getListItems (this.page) 
    .subscribe(listItems => this._listItems = listItems); 
    } 

} 

Answer 1

Ваша служба может выставить listItems$ как наблюдаемое событие, с использованием частного BehaviourSubject:

@Injectable() 
export class ListItemsService{ 
    public listItems$: Observable<[]> 
    private _listItems: BehaviorSubject<[]>; 

    private dataStore: { 
     listItems: [] 
    }; 

    constructor(@Inject(Http) private http: Http) { 
     this.baseUrl = 'http://localhost/listitemservice/'; 
     this.dataStore = { listItems: [] }; 
     this._listItems = new BehaviorSubject<[]>([]); 
     this.listItems$ = this._listItems.asObservable(); 

    } 
    loadAll() { 
     this.pageChange(1); 
    } 

    pageChange(page) { 
     this.http.get(this.baseUrl + page.id) 
     .subscribe(items => { 
      this.dataStore.listItems = items; 
      this._listItems.next(items); 
     }); 
    } 

Тогда в компоненте, подписаться на событие ListItems $. Когда он стреляет, сохранить список в переменной-члена вашего класса компонента:

export class ListItemsComponent implements OnInit { 
    private _listItems = []; 
    constructor(private _listItemsService:ListItemsServiceService) { } 

    ngOnInit() { 
    this._listItemService.listItems$.subscribe(t=> { 
     this._listItems = t; 
    }); 
    this._listItemsService.loadAll();  
    } 

    pageChange(page){ 
    this._listItemsService.pageChange(page); 
    } 

} 

На pageChange, вызовите pageChange метод ListItemsService whcich в свою очередь, вызывает событие ListItems $.

Answer 2

Если вы хотите, чтобы избежать дублирования кода вы можете сделать что-то вроде этого:

export class ListItemsComponent implements OnInit { 
    private _listItems = []; 
    page = 1; 
    constructor(private _listItemsService:ListItemsServiceService) { } 

    ngOnInit() { 
    this.pageChange(this.page); 
    } 

    subscription; 
    pageChange(page){ 
    if(this.subscription){ 
     this.subscribtion.unsubscribe(); 
    } 

    this.subscription = this._listItemsService.getListItems(this.page) 
     .subscribe(listItems => this._listItems = listItems); 
    } 
} 

Если ваш наблюдаемым всегда используют одни и те же данные, и вы не хотите, чтобы отправлять запросы на каждый подписавшись вам нужно добавить кэширование ваш наблюдаемым. Например:

this.yourObservable 
     .first() 
     .publishReplay(1) 
     .refCount(); 

Подробнее о кэшировании здесь: What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?