Запросите данные один раз в службе, совместно используемой двумя компонентами - PullRequest
Новая
       31

Запросите данные один раз в службе, совместно используемой двумя компонентами

0 голосов
/ 19 апреля 2019

У меня есть два компонента, которые внедряют один и тот же сервис.Один компонент должен функционировать независимо от другого компонента, но может быть добавлен к другому компоненту в любое время, и оба компонента нуждаются в одних и тех же данных.Я хочу избежать загрузки данных дважды (т. Е. Просто загрузить их один раз, независимо от того, какой компонент запросил данные).

Общая служба: 

@Injectable()
export class UserDetailsService {
    private userDetailsSubject: BehaviorSubject<UserDetails> = new BehaviorSubject<UserDetails>(new UserDetails());
    public currentModel: Observable<UserDetails> = this.userDetailsSubject.asObservable();

    constructor(private userDetailsRepository: UserDetailsRepository) {}

    public loadUserDetails(id: string) {
        // loadUserDetails makes a HttpClient get call which returns the result as an Observable
        this.userDetailsRepository.loadUserDetails(id)
            .subscribe(details => this.userDetailsSubject.next(details));
    }
}

Первый компонент: 

export class UserLookupComponent implements OnInit {

    // Other logic ...

    // The user is loaded via lookup.
    public user: User;

    constructor(private detailsService: UserDetailsService) {}

    public loadUserDetails() {
        this.detailsService.loadUserDetails(user.id);
    }

    ngOnInit() {
        this.detailsService.currentModel.subscribe(details => {
            this.user.details = details;
        });
    }

    // Other logic...
}

Второй компонент практически идентичен первому компоненту с другой логикой, соответствующей его назначению.По сути, это компонент Overview, который должен получать информацию для пользователя, если он еще не загружен с помощью this.detailsService.loadUserDetails(user.id), и устанавливать данные пользователя с помощью this.detailsService.currentModel.subscribe... точно так же, как первый компонент.

Однако проблема заключается в том, что данные запрашиваются дважды, и я хочу избежать такого поведения и загружать данные только один раз.Я попытался установить тему Subject<string> и добавить debounceTime и mergeMap(id => this.userDetailsRepository.loadUserDetails(id)) в currentModel, но происходит то же самое.Как я могу получить данные только один раз?

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

1 Ответ

0 голосов
/ 19 апреля 2019

Отредактировано на основе комментариев ниже

Если вы можете инициализировать userDetailsSubject как ноль ...

В Компоненте 1 вызовите loadUserDetails в ngOnInit после вашей подписки на currentModel. Обслуживание ... 

public loadUserDetails(id: string) {
    this.userDetailsSubject.next(new UserDetails())
    this.userDetailsRepository.loadUserDetails(id)
        .subscribe(details => this.userDetailsSubject.next(details));
}

Компонент 2 ... в ngOnInit ... 

this.detailsService.currentModel.subscribe(details => {
        if (!details) this.loadUserDetails();
        else this.user.details = details;
    });
...