angular - 如何在组件中调用服务？

Question

我有一个发出 http 请求并返回响应的服务。我想在我的组件中使用该响应并在屏幕上显示它的一部分，但它不起作用。我在控制台中没有收到任何错误，但屏幕上没有显示任何内容。

这是我的服务:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MenuService {
constructor(private http: HttpClient) {

 }
 menu: any;
 path:'/assets/MENU.json';

getMenu():any{
    this.http.get('/assets/MENU.json').subscribe(data => {
        // Read the result field from the JSON response.

        let newValue = JSON.stringify(data).replace('{"Node":', '[');
        newValue = newValue.substring(0,newValue.length - 1);
        newValue+="]";
       this.menu=JSON.parse(newValue);
       console.log(this.menu);
         return this.menu;
      });        

 }
} 

这是我的组件:

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

@Component({
moduleId: module.id,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})

export class HomeComponent implements OnInit {


constructor(private menuService: MenuService) {

}
nodes:any;

get(): void {
  this.nodes = this.menuService.getMenu();

}

ngOnInit(): void {
 this.get();


 }

}

Answer 1

首先，将服务返回值更新为 Observable :

getMenu():Observable<any>{
    this.http.get('/assets/MENU.json').subscribe(data => {
        // Read the result field from the JSON response.
        let newValue = JSON.stringify(data).replace('{"Node":', '[');
        newValue = newValue.substring(0,newValue.length - 1);
        newValue+="]";
        this.menu=JSON.parse(newValue);
        console.log(this.menu);
        return this.menu.json();
      });        
}

你可以像这样在你的组件中获取菜单:

get(): void {
  this.menuService.getMenu().subscribe( 
     result => {
         this.nodes = result; 
     }
     error => console.log(error);
  );
}