标签: observable

我应该何时存储Subscription实例并unsubscribe()在NgOnDestroy生命周期中调用,何时可以忽略它们？

保存所有订阅会在组件代码中引入很多混乱.

HTTP客户端指南忽略这样的订阅:

getHeroes() {
  this.heroService.getHeroes()
                   .subscribe(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

同时," 航线与导航指南"说:

最终,我们会在其他地方导航.路由器将从DOM中删除此组件并将其销毁.在此之前我们需要自己清理.具体来说,我们必须在Angular破坏组件之前取消订阅.如果不这样做可能会造成内存泄漏.

我们取消订阅我们Observable的ngOnDestroy方法.

private sub: any;

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     this.service.getHero(id).then(hero => this.hero = hero);
   });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

我试图在Angular中实现类似委托模式的东西.当用户点击a时nav-item,我想调用一个函数然后发出一个事件,而该事件又由一些其他组件监听事件来处理.

这是场景:我有一个Navigation组件:

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
    // other properties left out for brevity
    events : ['navchange'], 
    template:`
      <div class="nav-item" (click)="selectedNavItem(1)"></div>
    `
})

export class Navigation {

    @Output() navchange: EventEmitter<number> = new EventEmitter();

    selectedNavItem(item: number) {
        console.log('selected nav item ' + item);
        this.navchange.emit(item)
    }

}

这是观察组件:

export class ObservingComponent {

  // How do I observe the event ? 
  // <----------Observe/Register Event ?-------->

  public selectedNavItem(item: number) {
    console.log('item index changed!');
  }

}

关键问题是,如何让观察组件观察相关事件？

一位采访者问我:

什么是Observer和Observable我们何时应该使用它们？

我不知道这些术语的,所以,当我回到家,开始对谷歌搜索Observer和Observable,我发现来自不同资源的一些要点:

1)Observable是一个类,Observer是一个接口.

2)Observable该类维护一个Observers 列表.

3)当一个Observable对象被更新时,它会调用update()每个Observers 的方法来通知它,它被改变了.

我找到了这个例子:

import java.util.Observable;
import java.util.Observer;

class MessageBoard extends Observable
{
    public void changeMessage(String message) 
    {
        setChanged();
        notifyObservers(message);
    }
}

class Student implements Observer 
{
    @Override
    public void update(Observable o, Object arg) 
    {
        System.out.println("Message board changed: " + arg);
    }
}

public class MessageBoardTest 
{
    public static void main(String[] args) 
    { …

该函数more()应该Observable从get请求返回一个

export class Collection{

    public more = (): Observable<Response> => {
       if (this.hasMore()) {

         return this.fetch();
       }
       else{
         // return empty observable
       }
    }

    private fetch = (): Observable<Response> => {
       return this.http.get('some-url').map(
          (res) => {
              return res.json();
          }
       );
    }
}

在这种情况下,我只能做一个请求,如果hasMore()是真的,否则我在subscribe()函数上得到一个错误subscribe is not defined,我怎么能返回一个空的observable？

this.collection.more().subscribe(
   (res) =>{
       console.log(res);
   },
   (err) =>{
       console.log(err);
   }
)

更新

在RXJS 6中

import { EMPTY } from 'rxjs'

return EMPTY; 

Java 8流是否类似于RxJava observables？

Java 8流定义:

新java.util.stream包中的类提供Stream API以支持对元素流的功能样式操作.

这更像是一个"最佳实践"问题.有三个球员:a Component,a Service和a Model.在Component被调用Service从数据库中获取数据.该Service方法是使用:

this.people = http.get('api/people.json').map(res => res.json());

返回一个Observable.

在Component可以只订阅Observable:

    peopleService.people
        .subscribe(people => this.people = people);
      }

但是,我真正想要的是Service返回从数据库中检索Array of Model的数据创建的对象Service.我意识到Component可以在subscribe方法中创建这个数组,但我认为如果服务可以做到这一点并使其可用,那将会更清晰Component.

如何Service创建一个新的Observable,包含该数组,并返回？

我的部分代码:

import {Injectable} from 'angular2/core';
import {Http, Headers, Request, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class myClass {

  constructor(protected http: Http) {}

  public myMethod() {
    let request = new Request({
      method: "GET",
      url: "http://my_url"
    });

    return this.http.request(request)
      .map(res => res.json())
      .catch(this.handleError); // Trouble line. 
                                // Without this line code works perfectly.
  }

  public handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }

}

myMethod() 在浏览器的控制台中产生异常:

原始异常:TypeError:this.http.request(...).map(...).catch不是函数

我有一个具有此方法的服务:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

在组件的构造函数中,我订阅如下:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

如果一个对象来自服务器,但是我试图创建一个可以使用给定subscribe()的静态字符串调用的observable (当testModelService.fetchModel()没有收到uuid 时会发生这种情况),这样就可以了.所以在这两种情况下都有无缝处理.

我有一个服务,它返回一个observable,它向我的服务器发送一个http请求并获取数据.我想使用这些数据,但我总是得到undefined.有什么问题？

服务:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

零件:

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

在我的Angular 2组件中,我有一个Observable数组

list$: Observable<any[]>;

在我的模板中我有

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

但是对于Observable数组,列表$ .length不起作用.

更新:

似乎(列出$ | async)?. length给出了我们的长度但是下面的代码仍然不起作用:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

任何人都可以指导我如何检查Observable数组的长度.