Angular：我们可以 return 来自服务的字符串并在多个组件中显示它吗？

Question

我有一个服务和一个方法，其中 returns 一个字符串，在 ngOnInIt() 上调用该方法，但我试图将该返回值放入一个变量中以显示在模板中。

尝试使用 observable，但到目前为止没有帮助

服务:

FetchUsername() {

this.http.post("http://localhost:3000/fetch_name", {email: 
"sid@Yahoo.com"}).subscribe(
  success => {   

    var success_json = success.json();

    // console.log(success_json.message);

    return success_json.message;

  },
  error => {console.log(error)}
)

}

Component.ts:

username: string; 

ngOnInit() {
    this.username = this.crudService.FetchUsername();
}

我可以吗？

调用服务一次，将 HTTP 调用的结果值存储在该服务的变量中；
对于其他组件，我将不再需要 HTTP 调用，只需从该变量中读取即可，而不必一次又一次地调用该服务

Answer 1

您正在订阅一个存储 api 调用的结果到 service.ts 文件中的 success_json 变量；您正在从 component.ts 文件调用您的服务，并期望将一个值存储在 this.username

中

相关component.ts:

import { Component } from '@angular/core';
import { DemoService } from './demo.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';
  username: any;
  constructor(private serv: DemoService) {
    this.serv.FetchUsername().subscribe(
      dataa => { console.log(dataa); this.username = dataa }
      , errr => { console.log("error:", errr); }
    )
  }
}

工作stackblitz to showcase this

EDIT 根据以下评论：服务用于集中所有外部 (DB) 通信。如果你的不同组件（也许这些不同的 URL 是通过路由访问的，也许这些不同的组件在同一个页面上）需要更新数据，那么他们应该自己调用服务；如果您需要来自服务的单个数据实例，您可以（在一个组件中）获取一次并在您的组件之间传递；

您想将服务用作数据存储库，一次获取（通过 http），然后通过本地变量访问...我认为这是不可能的。每个组件中都注入了一个服务，因此，这些服务将有单独的实例，您将无法实现。

Angular：我们可以 return 来自服务的字符串并在多个组件中显示它吗？

Angular: can we return a string from a service and display it in multiple components?

typescript

angular-services

angular

angular-httpclient

angular7