Angular: можем ли мы вернуть строку из сервиса и отобразить ее в нескольких компонентах? - PullRequest
Новая
       27

Angular: можем ли мы вернуть строку из сервиса и отобразить ее в нескольких компонентах?

1 голос
/ 15 июня 2019

У меня есть служба и метод, который возвращает строку, в 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-вызов, и я могу просто читать из этой переменной вместо того, чтобы снова и снова вызывать службу

1 Ответ

0 голосов
/ 16 июня 2019

вы подписываетесь на сохранение результата вызова API в переменной success_json в вашем файле service.ts ;И вы вызываете свою службу из файла 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, чтобы продемонстрировать это

EDIT в свете комментариев ниже: Служба используется для централизации всех внешних (DB) коммуникаций.Если вашим разным компонентам (возможно, к этим разным URL-адресам обращаются по маршрутам, может быть, эти разные компоненты находятся на одной странице), требуются обновленные данные, тогда они должны сами вызывать службу;если вам нужен один экземпляр данных из службы, вы можете получить один раз (в компоненте) и передать его своим компонентам;

Вы хотите использовать службу в качестве хранилища данных, где она извлекается один раз (через http), а затем вызывается через локальную переменную ... По моему мнению, это будет невозможно.Служба внедряется в каждый компонент, и, следовательно, будут отдельные экземпляры этих служб, и вы не сможете этого достичь.

...