Как создать наблюдаемый из сервиса, используя `rxjs` в угловых

Question

Я получаю значение serer от одного из компонентов. компонент получает от бэкэнда. как только это сделано, оно отправляется на обслуживание.

из компонента нижнего колонтитула Я получаю данные из сервиса. если я утешу значение, оно отобразится как undefined. если я использую setTimeout, как следует, это работает.

import { Component, OnInit, Input } from '@angular/core';
import { StorageService } from '../shared/service/storage.service';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    constructor(private storage:StorageService) {
        setTimeout(()=> console.log( this.storage.socialNetworks ), 1000 ); //how to achive the same using Observable?
    }

    ngOnInit() {}

}

Answer 1

Не видя надлежащего примера вашего кода (включая, что такое StorageService), это сложно.

(для вашей информации это может быть сделано гораздо более умным , например, сохраните данные в ProtectionSubject в сервисе и / или поделитесь подпиской, чтобы предотвратить дублирование запросов AJAX (если это происходит подписался на много раз)).

Но это шаблон general :

@Injectable()
export class TokenService {

    private apiBaseUrl = ''; // <- some url here.

    loadSocialNetworks(): Observable<any> {
        const myEndpoint = 'socialNetworks'; // <- user correct endpoint name
        return this.http.get(`apiBaseUrl${myEndpoint}`)
            .map((response) => response.json());
    }

    // ....other code
}

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    socialNetworks: any;

    constructor(private storage:StorageService) {}

    ngOnInit() {
        this.storage.loadSocialNetworks()
            .subscribe((socialNetworks) => this.socialNetworks);
    }

}