Question

我在这样的服务中有一个功能（newEL）：

songs.service.ts

import {Injectable, Inject} from '@angular/core';
import {HttpModule, Headers, Http, Response } from '@angular/http';
import 'rxjs/Rx';

export class SongsService {

newAlbum(name:string){
  name = name.replace(/ /g, '+');
  var albumID= '';
  return this.http.
  get(uri + name)
  .map(
    ( res:Response) => {    
        var rawData = res.json();       
        // console.log(rawData);
        var albumName:string = rawData.data[0].title;
        albumID = rawData.data[0].id;
        this.albumSongs(albumID).subscribe(
            songs => {
            this.newSongs = songs
            this.albumData = {
                name:this.newAlbumName,
                songs:this.newSongs
            };
            this.testalbums.push(this.albumData);
            }
        );

        // this.albums.push(albumName,this.albumSongs(albumID))
    return [albumName, albumID]
    }
    );
   }

  newEL (albumName){
   return this.newAlbum(albumName)
    .map(
        album => {
           return this.newAlbumName = album[0];
        }
    );
  }
}

newEL()创建一个对象并将其推送到一个数组。我希望在启动时在另一个组件中运行此函数，我不能为了异步而做这样的事情

ngOnInit(){
  this.songsService.newEl("sams town");
  this.songsService.newEl("Blink182");
  this.songsService.newEl("enema of the");
}

所以我的 albums.component 看起来像这样，但是在下一个开始时似乎没有先完成。当我记录按下的数组时，我重复了第二个元素。我的猜测是在第一个函数返回一个值之前调用第二个函数。

AlbumsComponent。

export class AlbumsComponent {
    ngOnInit() {
      this.songsService.newEl("sams town").subscribe(
        album => 
            this.songsService.newEl("Madona").subscribe(
                album => { 
                    this.songsService.newEl("enema of the").subscribe(
                        album => { 
                            this.albums = this.songsService.testalbums; 
                            console.log(this.albums)
                            // return this.albums = this.songsService.testalbums;   

                        }
                    )
                }
            )
        }
    );
}

关于如何确保功能的任何想法都会在下一个开始运行？

Answer 1

您可以使用forkJoin或switchMap在角度服务中使用的Observable之间创建依赖关系。否则，您可以以原始方式创建具有依赖关系的promise链。

请参阅以下链接

https://github.com/Reactive- Extensions/RxJS/blob/master/doc/api/core/operators/forkjoin.md

也是这个答案

handling observables when one is dependent on data from another

在第一个完成之后重新执行observable

1 个答案: