angular 2如何自定义界面，如onInit

Question

Here I have a menu service like below...

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();
                    });
                }
            }
        }

In another page, I always need to call menu.onReady to get menu data, then do something after...

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;
    }
}

How to achieve an interface like angular's onInit ， some code like

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

I think you are not thinking the 'angular 2 way'

If we follow the official guide https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Your method getData should return a promise or an observable and you have to subscribe in the ngOnInit method.

Your code should be something like this:

 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;
    }
}