Angular: как получить данные от апи и объявить переменные глобально?

Question

[Vadimqa]

Помогите получить данные пользователя из АПИ, присвоить переменным, которые использовать в любом из компонентов

UPD: Немного переделал скрипт, упростил. Старые наброски убрал под спойлер. Теперь работает, но в пределах одного компонента. А на остальные не распространяется. А я хотел, чтобы переменные {{ user?.login }} были видны глобально, во всех шаблонах

Предыдущиая версия

АПИ:
{"login": "test", "ban": 0}
Корневой app.module.ts:

...
import { UserService } from './shared/user.service';
...
providers: [ UserService ],
...

user.service.ts
Вот тут начинаются проблемы, мое понимание углового пока на уровне копипаста

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

export class User {
      login: string;
      ban: number;
}

@Injectable()
export class UserService {

  constructor(private http: HttpClient) { }

  user: User

  ngOnInit() {
    this.http.get('/server/api/userService').subscribe((data: User) => {
    this.user = data;
     test = this.user['login']; // <- В этом моменте непонятности
    }
    );
  }
}

Помогите хотя бы для начала записать в консоль логин пользователя

АПИ
{"login": "test", "ban": 0}

app.component.ts

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


export class User {
  login: string;
  ban: number;
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})


export class AppComponent {

  user: User

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/server/api/userService').subscribe((data: User) => (this.user = data))
  }

}

Comments

[Andrew]

В этом моменте непонятности

какие?
Вот тут почитайте
и что такое test?

[Vadimqa]

Это читал как раз сейчас, непонятно, как присвоить переменной, например, login значение из апи, а потом, отобразить в любом из шаблонов компонентов. Я совсем не понимаю typescript и не могу даже понять как в консоль отправить результаты своих эксперементов

[Антон Швец]

Вот тут начинаются проблемы, мое понимание углового пока на уровне копипаста

пройдите тур героев. можно два раза.
Бесполезно объяснять то, что есть в мануале.

[Vadimqa]

Антон Швец, а ты попробуй, хотя бы с малого
Правильно ли я вижу алгоритм?
1) Сервисом загружаю данные с сервера, присваиваю переменным значения
2) Загружаю сервис в главный модуль
3) В любом из компонентов, без дополнительных инклудов могу использовать переменные {{user.login}}

[Антон Швец]

Vadimqa,

1) Сервисом загружаю данные с сервера, присваиваю переменным значения

нет
В сервисах данные не загружаются, в сервисы помещаются методы, предоставляющие способ вытащить данные.

2) Загружаю сервис в главный модуль

нет
читать про ангуляров di

3) В любом из компонентов, без дополнительных инклудов могу использовать переменные {{user.login}}

нет
глобальные переменные не используются

[Vadimqa]

Антон Швец, спасибо. Попробую с новыми мыслями. Чирканите любые подсказки, кто бездельничает
1) Отдельный файл user.service.ts с запросом к базе мне не нужен
2) В корневом app.component надо здесь:
export class AppComponent {
Сделать запрос к апи
Присвоить переменные
Чтобы они были видны во всех компонентах
}

Помогите просто сделать запрос к апи при загрузке страницы и на переменные разобрать ответ. Чтобы можно было использовать их в разных компонентах

[Антон Швец]

1) Отдельный файл user.service.ts с запросом к базе мне не нужен

нужен

2) В корневом app.component надо здесь:

написал ответ

Answer 1

[Александр]

Если не ошибаюсь, экземпляр сервиса создается 1, и потом все компоненты ссылаются на него. Значит, можно попробовать в классе сервиса объявить некое хранилище, в которое будете складывать данные.

Comments

[Антон Швец]

при желании можно наплодить сколько угодно экземляров сервисов

Answer 2

[Sashqa]

Вы создаете сервис, в этом сервисе пишете методы для работы с api
Получили данные, для передачи их в другие компоненты вы можете использовать либо общий сервис, либо прокидывать через декораторы Input/Output, ну либо вообще записать в localStorage и дергать оттуда.

Answer 3

[Антон Швец]

пройстейший сервис чтобы один раз спросить бэкенд, закешировать и отдавать потом компонентам, чтобы они подписывались.

@Injectable({
  providedIn: 'root'
})
class UserService {
  private user$;
  
  constructor(private http: HttpClient) {}

  fetchUser(): Observable<User> {
    if (!this.user$) {
      this.user$ = this.http.get('/server/api/userService').pipe(shareReplay(1))
   }
   return this.user$;
 }
}

Его никуда не надо загружать, просто помещать в конструктор компонентов, там где он будет использваться. Подходит для данных, актуальных и неизменных на протяжении всей жизни приложения.

И этот код не принесет вам пользы, если вы не понимаете что он делает.

Comments

[Vadimqa]

Скопировал код в файл user.service.ts, добавив export: export class UserService {
Консоль браузера ругается на {{user.login}} в app.component.html. Редактор подсвечивает ошибку на private user$; :
Member 'user$' implicitly has an 'any' type, but a better type may be inferred from usage.
Член 'user$' неявно имеет тип 'any', но лучший тип может быть выведен из использования.

[Антон Швец]

Vadimqa, ну впиши ему тип, долго чтоль.
а в шаблоне user конечно отсуствует. там только публичные свойства класса AppComponent

[Vadimqa]

Вот мне и надо просто запубличить выдачу от апи. Все понимают что там 2 строчки в нужном месте, но на трех форумах ответить не могут
При загрузке страницы надо обратится к серверу, забрать данные пользователя. Потом выводить их в шаблоне любого компонента
Серверу при этом ничего передавать не нужно