以添加评论组件为例看angular2请求数据的处理

在NiceFish项目中，数据请求处理并没有用Promise的那一套方法，用的是Observable(观察者模式)，我将其理解成生产者和消费者模式

如下简单例子：出自(https://segmentfault.com/a/1190000005051034)

var observable = Rx.Observable.create(function (observer) {

  observer.next(1);

  observer.next(2);

  observer.next(3);

  setTimeout(() => {

    observer.next(4);

    observer.complete();

  }, 1000);

});

console.log('just before subscribe');

observable.subscribe({

  next: x => console.log('got value ' + x),

  error: err => console.error('something wrong occurred: ' + err),

  complete: () => console.log('done'),

});

console.log('just after subscribe');

运行结果如下：

just before subscribe

got value 1

got value 2

got value 3

just after subscribe

got value 4

done

observer.complete()执行后observer.next()的执行是不会触发observable.subscribe里面的函数的。observer.complete()相当于终止了消费者与生产者之间的订阅关系。observable.subscribe()相当于消费者订阅了生产者的数据，一旦生产者产生了数据就会自动推送给消费者，这样会自动导致消费者根据推送过来的数据执行各自注册的函数。这是一种生产者主动，消费者被动的数据推送模式。类似于promise，但所不同的是observable能多点发射数据，能多次停止或执行subscribe里面注册的函数。

observable如何与用户点击事件关联起来呢： 参考：http://blog.csdn.net/tianjun2012/article/details/51246422

var allMoves = Rx.Observable.fromEvent(document, 'mousemove');

allMoves.subscribe(function(e) {

console.log(e.clientX, e.clientY);

});

var movesOnTheRight = allMoves.filter(function(e) {

return e.clientX > window.innerWidth / 2;

});

var movesOnTheLeft = allMoves.filter(function(e) {

return e.clientX < window.innerWidth / 2;

});

movesOnTheRight.subscribe(function(e) {

console.log('Mouse is on the right:', e.clientX);

});

movesOnTheLeft.subscribe(function(e) {

console.log('Mouse is on the left:', e.clientX);

});

以上就是observer的用法。add-comment.components组件在post-detail-main.components组件(属于post.module模块)中被引用，当add-comment.components被加载时

import .....

@Component({

  selector: 'app-add-comment',

  templateUrl: './add-comment.component.html',

  styleUrls: ['./add-comment.component.scss']

})

export class AddCommentComponent implements OnInit {

  public comments: Array<Comment>;

  constructor(

    public commentService: CommentService,

    public activeRoute: ActivatedRoute)

  { 

  }

  ngOnInit() {

    this.activeRoute.params.subscribe(

      params => this.getCommentList(params["postId"])

    );

  }

  public getCommentList(postId: number){

    this.commentService.getCommentList(postId)

      .subscribe(

        data => {

          this.comments = data["items"]

        },

        error => console.error(error)

      );

  }

}

constructor里面的两个参数：commentService和activeRoute是两个被注入的服务，ngOnInit表示一旦组件加载完成（这里的完成是指视图加载完成，组件被编译以及初始化之后即ngOnInit是在ngOnchanges执行完之后才调用）就会执行里面的内容，所以通常模板数据的初始化可以在ngOnInit方法内执行，即在里面请求服务器数据。

（ngOnInit纯粹是通知开发者组件/指令已经被初始化完成了，此时组件/指令上的属性绑定操作以及输入操作已经完成，也就是说在ngOnInit函数中我们已经能够操作组件/指令中被传入的数据了）

参考：https://segmentfault.com/a/1190000012095427，http://blog.csdn.net/u010730126/article/details/64486997，https://segmentfault.com/q/1010000006040976


this.activeRoute.params：

以下是activeRoute及其属性的定义

interface RouterState {

  snapshot: RouterStateSnapshot; //returns current snapshot

  root: ActivatedRoute;

}

interface ActivatedRoute {

  snapshot: ActivatedRouteSnapshot; //returns current snapshot

  url: Observable<UrlSegment[]>;

  params: Observable<{[name:string]:string}>;

  data: Observable<{[name:string]:any}>;

  queryParams: Observable<{[name:string]:string}>;

  fragment: Observable<string>;

  root: ActivatedRout;

  parent: ActivatedRout;

  firstchild: ActivatedRout;

  children: ActivatedRout[];

}

可以看到params是Observable的类型，事实上是angular路由监听了URL，一旦URL变化就会触发params注册的函数，那为什么params要是Observable的类型呢，在ngOnInt方法里面直接去获取URL里面的参数不可以吗，ngOnInt一定是在URl变化后执行的。

这是因为比如一个A组件，它的路由路径是/post/details/1,当A组件第一次加载到页面时，ngOnInt方法会执行，这个时候直接获取URL里面的参数是可以做到的，如下：

当某一时刻用户在页面触发了某一事件，或者js自动隔一段时间执行如下代码：this.router.navigate(['post/postdetail', '2']); 即希望URL跳转为/post/details/2；这个时候angular是不会重新加载组件的，因此ngOnInt以及constructor方法不会执行。this.snapshot的值不会变化。这个时候如果你在其他地方用到this.snapshot的引用的话是不正确的。当然this.activeRoute.snapshot.params是变化的。如果你不介意重新像上面来一次赋值的话。

那么怎么样才能让this.snapshot的值随着URL变化而变化呢。可以将上面红框的赋值语句放到params.subscribe的参数方法里面去。这样一旦URL参数变化，this.activeRoute.params注册的方法就会执行，getCommentList（）自动从服务器获取评论列表信息并显示在页面。this.snapshot这个路由参数信息随时都是有效正确的。

这里RouterStateSnapshot和ActiveRoute是对应的。它们都可以获取URl参数，但RouterStateSnapshot是一个快照，代表某一时刻页面的url参数信息。是一个固定的状态，可以通过直接赋值来获取URL的参数。URL的变化是不会触发它的更新的。而ActiveRoute是会随着URl变化而变化的路由信息状态。

注意：官网上对于params和queryParams这两个属性有了更新：

详细请参考：https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab，https://angular.cn/guide/router，://juejin.im/entry/5822c9d6da2f60005d1af6ce

在实际页面查看两者的区别可以参考如下代码：

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute, Router, Params } from '@angular/router';

import { CommentService } from '../services/comment.service';

import { Comment } from '../model/comment-model';

@Component({

  selector: 'app-add-comment',

  templateUrl: './add-comment.component.html',

  styleUrls: ['./add-comment.component.scss']

})

export class AddCommentComponent implements OnInit {

  public comments: Array<Comment>;

  public snapshot;

  constructor(

    public commentService: CommentService,

    public activeRoute: ActivatedRoute,

    public router: Router)

  {

    setTimeout(() => {

      //this.router.navigate(['../', '2'], {relativeTo: this.activeRoute });

      this.router.navigate(['post/postdetail', '2']);

    }, 3000);

  }

  ngOnInit() {

    this.activeRoute.params.subscribe(

      params => this.getCommentList(params["postId"])

    );

    this.snapshot = this.activeRoute.snapshot.params;

  }

  public getCommentList(postId: number){

    console.log('snapshot.params::::::::::::::::',this.snapshot);

    console.log('getCommentList::::::::subscribe:::::::::::::::::::::',postId);

    console.log('getCommentList:::::::::snapshot.params::::::::::::::::',this.activeRoute.snapshot.params);

    this.commentService.getCommentList(postId)

      .subscribe(

        data => {

          this.comments = data["items"]

        },

        error => console.error(error)

      );

  }

}

getCommentList方法调用了commentService服务来从服务器获取信息，那么commentService是如何发起请求的呢，里面有什么逻辑呢？

　先上源码：

import { Injectable } from '@angular/core';

import { Http, Response, Headers, RequestOptions,URLSearchParams } from '@angular/http';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';

import { Comment } from '../model/comment-model';

@Injectable()

export class CommentService {

    public commentListURL = "mock-data/comment-mock.json";

    constructor(public http: Http) { }

    public getCommentList(postId: number):Observable<Comment[]>{

        return this.http.get(this.commentListURL)

            .map((res: Response) => res.json())

    }

}

　Observable<Comment[]>是代表Observable的返回类型，一旦服务器发回了数据，触发的subscrible里面注册的函数的参数为一个数组，里面的元素是Comment类型。

Http是angular内置服务，这里在构造函数里面被注入。http.get()返回的也是Observable类型的对象，它有个属性map，这个map的作用是重构服务器传回来的信息(具体请参考Observable的相关文档)。

这里的map方法也返回一个Observable的对象。res.json()就是将服务器传回来的信息对象化。

以上是一个简单的请求服务器数据的demo，可以将这个demo作为基础种子放到我们的项目中去。

巴特西

以添加评论组件为例看angular2请求数据的处理

最新文章

热门文章