Угловые - с помощью наблюдаемых и подписавшись на ее изменения


У меня есть компонент и услуги. Служба обратившись к API и возвращает данные, которые должны быть обработаны в компоненте. Теперь, я могу сделать это двумя способами:

  1. Создание общественных Observable в мои услуги и компонент подписке и обработки изменений
  2. Все методы в своем служении вернуться ObservableS и компонент подписывается на каждый звонок, а затем обрабатывает изменения.

Позвольте мне показать минимальный пример.

Так что это первое решение:

мой-службе.обслуживание.ТС

@Injectable()
export class MyService {

    requestObservable: Observable<any>;
    private requestObserver: Observer<any>;

    constructor(private http: Http) {

        this.requestObservable = new Observable<any>(observer => {
            this.requestObserver = observer;
        });

    }

    get(id: string): void {
        this.http
        .get(`/some/url/${id}`)
        .map(response => response.json())
        .subscribe(
            next => this.requestObserver.next(next)
        );
    }

}

мой компонент.компонент.ТС

@Component({...})
export class MyComponent implements OnInit {

    constructor(private myService: MyService) {

        this.myService.requestObservable.subscribe(
            next => this.handleChanges(next)
        );

    }

    ngOnInit(): void {

        this.myService.get(1);
        this.myService.get(2);

    }

    handleChanges(changes: any): void {

        console.log(changes);

    }

}



И это такая же ситуация, но решать в второй способ:

мой-службе.обслуживание.ТС

@Injectable()
export class MyService {

    constructor(private http: Http) {}

    get(id: string): Observable<any> {
        return this.http
        .get(`/some/url/${id}`)
        .map(response => response.json());
    }

}

мой компонент.компонент.ТС

@Component({...})
export class MyComponent implements OnInit {

    constructor(private myService: MyService) {}

    ngOnInit(): void {

        this.myService.get(1).subscribe(
            next => {
                console.log(next);
            }
        );

        this.myService.get(2).subscribe(
            next => {
                console.log(next);
            }
        );

    }

}

Итак, как вы видите оба примера делают одно и то же, но другими способами. Я опустил ненужные importS и другие вещи, потому что они не связаны с моей проблемой.

Я бы сказал, что первое решение намного чище, поскольку это дает мне возможность иметь несколько вызовов одной get() способ и еще один метод, который обрабатывает все из них.

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

Прошу совета, какое решение лучше?



Комментарии