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

Answer 2

您还必须在app模块中注册它。找到您的@NgModule并在提供商字段中列出MenuService类。

像这样：

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent
    ],
    imports: [
        bla,
        bla
    ],
    providers: [
        MenuService
    ],
    bootstrap: [AppComponent],
    schemas: []
})

最大的问题是你实际上并没有在getMenu方法中返回任何内容。

尝试执行以下操作：

get(): void {
  this.menuService.getMenu().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+="]";
        const menu=JSON.parse(newValue);
        this.nodes = menu;
      });

}

而不是getMenuService执行此操作：

getMenu():any{
    return this.http.get('/assets/MENU.json');        

 }

虽然你没有收到任何错误，这很奇怪。

Answer 3

在组件的构造函数中，添加一个具有您服务类型的参数：

constructor(private myService: MyService){

在模块声明中注册服务：

@NgModule({
...
providers: [MyService]})

3现在，您可以将服务与组件中的this.myService一起使用。

如何在组件中调用服务？

3 个答案: