Link: https://angular.io/docs/js/latest/api/core/OnInit-interface.html, https://www.youtube.com/watch?v=bY92HFyaBvo

export interface OnInit

exported from angular2/core defined in angular2/src/core/linker/interfaces.ts (line 79)

Implement this interface to execute custom initialization logic after your directive's data-bound properties have been initialized.

ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

Keep it as a best pratices that implements OnInit, OnDestroy. Then inside ngOnInit, we call service to fetch data back. And in ngOnDestroy, we unsubscribe the Observable.

import {Component, ElementRef, EventEmitter, Output, OnInit, OnDestroy} from 'angular2/core';
import {Observable} from 'rxjs/Rx';
import {SearchServcie} from './SearchServcie'; @Component({
selector: 'search-input',
template: `<input type="text" autofocus>`
}) export class SearchInput implements OnInit, OnDestroy{ @Output() loading = new EventEmitter();
@Output() results = new EventEmitter(); private _subscription; constructor(
public youtube: SearchServcie,
private el:ElementRef) {} ngOnDestroy() {
// Unsubscribe the Observabler
console.log('ngOnDestroy');
     if(this._subscription) 
this._subscription.unsubscribe();
} ngOnInit() {
// Fetch the data from server
console.log("init");
const keyup$ = Observable.fromEvent(this.el.nativeElement, 'keyup');
const searchInput$ = keyup$
.debounceTime()
.map((e:any) => {
return e.target.value.trim();
})
.distinctUntilChanged()
.filter((val:string) => {
return val.length > ;
})
.do(() => {
this.loading.emit(true);
});
const query$ = searchInput$
.switchMap( (query) => this.youtube.doSearch(query)); this._subscription = query$.subscribe((videos) => {
this.results.emit(videos);
this.loading.emit(false);
}, (err) => {
console.log(err);
this.loading.emit(false);
}, () => {
this.loading.emit(false);
});
}
}

[Angular 2] implements OnInit, OnDestory for fetching data from server的更多相关文章

  1. Fetching data with Ajax小例子

    ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...

  2. zookeeper提示Unable to read additional data from server sessionid 0x

    配置zookeeper集群,一开始配置了两台机器server.1和server.2. 配置参数,在zoo.cfg中指定了整个zookeeper集群的server编号.地址和端口: server.1=1 ...

  3. [Redux] Fetching Data on Route Change

    We will learn how to fire up an async request when the route changes. A mock server data: /** /api/i ...

  4. 『奇葩问题集锦』Ruby 切换淘宝源报错WARNING: Error fetching data: SSL_connect returned=1 errno=0 state=SSLv3 read s erver certificate B: certificate verify failed

    ===>首先需要使用https<===https://ruby.taobao.org/ 第一步 下载http://pan.baidu.com/s/1kU0rxtH 复制到ruby安装的根目 ...

  5. [Angular 2] Refactoring mutations to enforce immutable data in Angular 2

    When a Todo property updates, you still must create a new Array of Todos and assign a new reference. ...

  6. Kafka消费者拉取数据异常Unexpected error code 2 while fetching data

    Kafka消费程序间歇性报同一个错: 上网没查到相关资料,只好自己分析.通过进一步分析日志发现,只有在拉取某一个特定的topic的数据时报错,如果拉取其他topic的数据则不会报错.而从这个异常信息来 ...

  7. [Falcor] Return the data from server

    <!-- index.html --> <html> <head> <!-- Do _not_ rely on this URL in production. ...

  8. ngx通讯之可观察对象实现

    1.公共服务 //test.service.ts import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Subje ...

  9. angular6 页面加载数据时的loading提示

    使用npm安装ngx-loading模块 npm install --save ngx-loading 在app.module.ts中导入模块 import { BrowserModule } fro ...

随机推荐

  1. 一个控制台贪吃蛇小游戏(wsad控制移动)

    /******************************************** * 程序名称:MR.DUAN 的贪吃蛇游戏(链表法) * 作 者:WindAutumn <flutti ...

  2. libthrift0.9.0解析(四)之TThreadPoolServer&ServerContext

    TThreadPoolServer直接继承自TServer,实现类serve和stop操作. 在serve中可以接受多个连接,每个连接单独开一个线程进行处理,在每个线程中,按顺序处理该线程所绑定连接的 ...

  3. 【转】#include,#import,@class的区别

    #include         #include  <>    :用于对系统文件的引用,编译器会在系统文件目录下去查找该文件.           #include "xx.h ...

  4. UITableViewCell实现3D缩放动画

    gif效果图: 代码部分: import UIKit class TableViewController: UITableViewController { override func viewDidL ...

  5. PHP XML Expat 解析器

    PHP XML Expat 解析器 内建的 Expat 解析器使在 PHP 中处理 XML 文档成为可能. XML 是什么? XML 用于描述数据,其焦点是数据是什么.XML 文件描述了数据的结构. ...

  6. Java学习笔记(1):注释规范

    注释规范 1.   类注释 在每个类前面必须加上类注释,注释模板如下: 2.   属性注释 在每个属性前面必须加上属性注释,注释模板如下: 3.   方法注释 在每个方法前面必须加上方法注释,注释模板 ...

  7. Windows 7 64位下解决不能创建Django项目问题

    把djingo-admin.py的全路径写出来 在cmd命令行下直接输入python C:\Python27\Scripts\django-admin.py startproject site(sit ...

  8. HAOI 硬币购物

    试题描述: 现在一共有4种硬币,面值各不相同,分别为ci(i=1,2,3,4).某人去商店买东西,去了tot次,每次带di枚ci硬币,购买价值为si的货物.请问每次有多少种付款方法. 输入: 第一行包 ...

  9. MapReduce UnitTest

    通常情况下,我们需要用小数据集来单元测试我们写好的map函数和reduce函数.而一般我们可以使用Mockito框架来模拟OutputCollector对象(Hadoop版本号小于0.20.0)和Co ...

  10. DoingOrder.aspx.cs缓存的使用方法

    using System; using System.Web.UI; using System.Data; using System.Text; using BLL = SmartWaterSys.B ...