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

如何实现像angular 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方式＆＃39;

如果我们遵循官方指南

您的方法getData应返回一个promise或一个observable，您必须使用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;
    }
}