Angular：我们可以从服务中返回一个字符串并将其显示为多个组件吗？

Question

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

尝试使用可观察到的方法，但到目前为止没有帮助

服务：

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

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

中

相关的 service.ts ：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class DemoService {
  urlSO: string = 'https://api.stackexchange.com/2.2/users/8149783?order=desc&sort=reputation&site=stackoverflow'
  constructor(private http: HttpClient) { }
  FetchUsername() {
    return this.http.get(this.urlSO);
  }
}

相关的 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

编辑，请参见以下评论： 服务用于集中所有外部（DB）通信。如果您的不同组件（可能通过路由访问了这些不同的URL，也许这些不同的组件位于同一页面上）需要更新数据，则它们应该自己调用服务；如果您需要服务中的单个数据实例，则可以（在组件中）获取一次并在组件之间传递；

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