angular 7 api没有被调用答案

【问题标题】：angular 7 api not getting calledangular 7 api没有被调用
【发布时间】：2018-12-18 01:49:54
【问题描述】：

我正在尝试调用 API，但我认为有问题，

import { map } from "rxjs/operators";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export class Message {
    constructor(public text: any, public sentBy: any) { }
}

@Injectable()
export class ChatService {
    constructor(public http: HttpClient) {
    }

    public sendMessage(message) {
        const usertext = new Message(message, 'user');
        console.log("message send",usertext);
       return this.http
            .post<any>(`http://locahost:3000/api/text_query`, usertext)
            .pipe(
                map(response => {
                    return response;
                })
            );
    }

}

在 chrome 的 Network tab 中没有得到任何日志。我正在使用角度 7.0.1 和打字稿：3.1.3 这是我的应用组件文件

import {Component, OnInit} from '@angular/core';
import {ChatService} fom './chat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  message: string;
  constructor(private chatService: ChatService) {}

  sendMessage() {
    this.chatService.sendMessage(this.message).subscribe(res=>{
    })
  }
  ngOnInit() {
  }
}

该服务已正确添加到 app.module.ts 文件中

【问题讨论】：

您是否在应用程序的某个位置订阅sendMessage？
不，我是从应用程序组件调用的，数据正在这里，无论我想发送什么
所以在 AppComponent 中注入你的服务并订阅 appComponent 类中服务的 sendMessage。
请包含来自 AppComponent 的代码，显示您如何将 ChatService 注入组件以及如何调用 sendMessage 方法。
编辑了问题

标签： angular typescript

【解决方案1】：

确保在组件中注入此服务ChatService。

ChatService 应该注册为应用程序模块的提供者或使用它的地方，然后您必须在注入服务的组件中订阅sendMessage。

确保您的服务已在 app.module 的提供者列表中注册或在顶部有 Injectable 声明：

@Injectable({
  providedIn: 'root',
})

Angular 7 中的一个常见服务示例如下：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})

export class ChatService{

  constructor() { }

}

【讨论】：

【解决方案2】：

HttpClient 公开的方法通常返回一个 Cold Observable。这实质上意味着这些方法不会进行任何 API 调用，除非它们返回的 Observable 是 subscribed。

解决您的问题：

import { map } from "rxjs/operators";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface Message {
  public text: any;
  public sentBy: any;
}

@Injectable()
export class ChatService {
  constructor(public http: HttpClient) {}

  public sendMessage(message) {
    const usertext: Message = { text: message, sentBy: 'user' };
    return this.http
      .post<any>(`http://locahost:3000/api/text_query`, usertext);
  }

}

在你的组件中：

...
import { ChatService } from "path-to-chat-service";

@Component({...})
export class ChatComponent {
  constructor(private chatService: ChatService) {}

  sendMessage(message) {
    this.chatService.sendMessage(message)
      .subscribe(res => console.log(res));
  }

  ...

}

有用的资源：

Hot vs Cold Observables - Ben Lesh（RXJS 负责人）。
COLD VS HOT OBSERVABLES - Thoughtram。

【讨论】：

【解决方案3】：

你必须使用 .subscribe() 订阅你的 observable

顺便说一句：为什么要映射到相同的值？

       map(response => {
            return response;
        })

【讨论】：