角2個如何自定義接口的OnInit一樣

Question

這裏我有類似下面的菜單服務...

menu.service.ts

import { Injectable, EventEmitter } from '@angular/core'; 
     import { 
      Http, 
      Request, 
      Response, 
      RequestMethod, 
      Headers, 
      URLSearchParams, 
      RequestOptions, 
      ResponseContentType, 
     } from '@angular/http'; 
     import { Observable } from 'rxjs/Observable'; 
     import * as _ from 'lodash' 

     @Injectable() 
     export class MenuService { 

      constructor(public http: Http) {} 
      IsOnReady = false; 
      _onReady: EventEmitter<string> = new EventEmitter<string>(true); 

      data = []; 
      getData() { 

      return this.http.get('/api/Menus').subscribe(data => {  
        this.data = data.json() 
        this.IsOnReady = true; 
        this._onReady.emit('menu is ready'); 
       }); 

      } 


      onReady(callback) { 
       if (this.IsOnReady) { 
        callback(); 
       } 
       else { 
        this._onReady.subscribe(r => { 
         callback(); 
        }); 
       } 
      } 
     } 

在另一頁，我總是需要調用menu.onReady拿到菜單數據，然後做的東西后...

import { OnInit } from '@angular/core'; 
import { MenuService } from '../../../services/menu.service'; 


export class NewsComponentBase implements OnInit{ 

    NewsCategoryID:string 

    constructor(public menu: MenuService) { 
    } 

    ngOnInit() { 
     this.menu.onReady(() => this.active()); 
    } 

    active() { 
     this.NewsCategoryID= this.menu.data[0].NewsCategoryID; 
    } 
} 

如何實現像角的onInit接口，一些類似的代碼

import { MenuService,MenuOnReady} from '../../../services/menu.service'; 

export class NewsComponentBase implements MenuOnready { 

    NewsCategoryID:string 

    constructor(public menu: MenuService) { 
    } 

    MenuOnReady() { 
     this.NewsCategoryID= this.menu.data[0].NewsCategoryID; 
    } 
} 

Answer 1

我想你是不是想着「角2路」

如果我們按照官方指導https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

你的方法getData應該返回一個承諾或可觀察到的，你必須訂閱中ngOnInit方法。

你的代碼應該是這樣的：

import { Injectable, EventEmitter } from '@angular/core'; 
     import { 
      Http, 
      Request, 
      Response, 
      RequestMethod, 
      Headers, 
      URLSearchParams, 
      RequestOptions, 
      ResponseContentType, 
     } from '@angular/http'; 
     import { Observable } from 'rxjs/Observable'; 
     import * as _ from 'lodash' 

     @Injectable() 
     export class MenuService { 

      constructor(public http: Http) {} 

      getData():Promise<any> { 
       return this.http.get('/api/Menus'); 
      } 
     } 

import { OnInit } from '@angular/core'; 
import { MenuService } from '../../../services/menu.service'; 


export class NewsComponentBase implements OnInit{ 

    NewsCategoryID:string 

    constructor(public menu: MenuService) { 
    } 

    ngOnInit() { 
     this.menu.getData().then(data => {  
        this.data = data.json() 
        this.active(); 
       }); 
    } 

    active() { 
     this.NewsCategoryID= this.menu.data[0].NewsCategoryID; 
    } 
}