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方式”

如果我們遵循官方指南https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

您的方法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;
    }
}