zoukankan      html  css  js  c++  java
  • [Angular 2] implements OnInit, OnDestory for fetching data from server

    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(500) .map((e:any) => { return e.target.value.trim(); }) .distinctUntilChanged() .filter((val:string) => { return val.length > 1; }) .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); }); } }
  • 相关阅读:
    岭回归和LASSO
    涉及到的知识点有页连接符的使用、批量修改元器件属性等知识
    OrCAD中分立器件的Symbol绘制
    OrCAD来新建原理图工程、设置原理图页面、新建原理图库
    python控制TLP2041高压电源源码(modbus rtu,try捕获异常使用)
    pyqt5分离ui主线程到子线程
    modbus rtu协议
    pcb接地设计
    PSPICE参数扫描+光标跟踪曲线改变+窗口分多个坐标系
    ad 导入logo
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5326354.html
Copyright © 2011-2022 走看看