Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2019, 11:35
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

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

Делаю так:

АПИ:
{"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']; // <- В этом моменте непонятности
    }
    );
  }
}

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

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

Последний раз редактировалось Vadya, 25.12.2019 в 11:42.
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2019, 13:55
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Здравствуйте. Я бы вам советовал прочитать о таком явлении как сервисы и dependency injection. Хотябы здесь: metanit.com

Ваш код по сути просто недописан. У вас есть сервис, который уже читает данные из АПИ. Сам факт объявления его как сервис делает его доступным внутри всего приложения. Осталось расширить интерфейс сервиса методами доступа к даннам из внешних компонентов. Дописываем UserService:

getUserInfo(){
    return this.user;
}


Встраиваем сервис в компонент. Например в AppComponent. Опускаю здесь ненужные подробности и возможно допуская кое-какие ошибки. Вам ведь нужен подход? :о) :

export class AppComponent {
  
  currentUser: User;

  constructor(
    userServise: UserService  // Вот момент встраивания сервиса
  ){}

  onInit(){
    this.currentUser = this.userServise.getUserInfo();
  }
}
Ответить с цитированием
  #3 (permalink)  
Старый 26.12.2019, 09:15
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

sniffysko, спасибо за помощь, но пока не получается.

Вот так работает, но в пределах одного компонента. А на остальные не распространяется. А я хотел, чтобы переменные {{ user?.login }} были видны глобально, во всех шаблонах


app.component.ts

import { Component } from '@angular/core';
//import { UserService, User } from './shared/user2.service';
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))
  }

}

Последний раз редактировалось Vadya, 26.12.2019 в 09:35.
Ответить с цитированием
  #4 (permalink)  
Старый 26.12.2019, 14:31
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,200

Vadya,
Ваш код не работает, потому что такие хуки как ngOnInit они как бы для компонентов. Снаружи никто метод этого класса не вызывает судя по коду.

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

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

@Injectable()
export class UserService {

    constructor(private http: HttpClient) {}

    user: User

    getUser() {
        if (this.user) {
            return of(this.user);
        }
        return this.http.get('/server/api/userService').pipe(
            tap((data: User) => this.user = data)
        );
    }
}
Ответить с цитированием
  #5 (permalink)  
Старый 27.12.2019, 07:30
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

Перенес этот код в отдельный файл, user.module.ts
В app.module.ts сделал импорт и providers: [ UserService ]
Теперь непонятно, как этот сервис соберет данные и расшарит их для всех компонентов. Ведь даже запроса к апи он не делает
Мне где то надо единожды вызвать функцию getUser? Пока не понимаю даже как вызвать ее в шаблоне компонента

Последний раз редактировалось Vadya, 27.12.2019 в 07:47.
Ответить с цитированием
  #6 (permalink)  
Старый 27.12.2019, 09:23
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,200

Vadya,
Нужно вызывать метод getUser сервиса UserService в каждом из компонентов, нуждающихся в юзере. Например, так
export class AppComponent {
  
  currentUser: User;

  constructor(
    userServiсe: UserService  // Вот момент встраивания сервиса
  ){}

  onInit(){
    this.userServiсe.getUser().subscribe(user => this.currentUser = user);
  }
}
Ответить с цитированием
  #7 (permalink)  
Старый 27.12.2019, 09:47
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

Получается по сути это как у меня здесь: https://javascript.ru/forum/518052-post3.html (#3)?
То есть если мне нужны данные пользователя в header.component и footer.component, то из каждого компонента будет произведен запрос к серверу?
Ответить с цитированием
  #8 (permalink)  
Старый 27.12.2019, 10:19
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,200

Цитата:
из каждого компонента будет произведен запрос к серверу?
конкретно в этой реализации UserService`a - да. Вот пример, как будет правильнее https://stackoverflow.com/a/36291681/8230845
Ответить с цитированием
  #9 (permalink)  
Старый 27.12.2019, 12:20
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

Вот теперь все встало на свои места. Я почему-то думал, что в угловом как-то можно сделать все в одном месте и после этого не трогать модули компонентов.
Ответить с цитированием
  #10 (permalink)  
Старый 29.12.2019, 09:57
Интересующийся
Отправить личное сообщение для Vadya Посмотреть профиль Найти все сообщения от Vadya
 
Регистрация: 15.04.2010
Сообщений: 24

У меня еще один вопрос появился. Данные пользователя я получил, а в роутер передать через функцию не могу. Вот код с комментарием, где не получается:

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs";
import { UserService } from './user.service';
import { Injectable } from '@angular/core';


@Injectable()
  export class AuthGuard implements CanActivate {
    
    user: any;

    constructor(private userService: UserService, private router: Router) { }

      public isAuthenticated(): any {    
      this.userService.getUser().subscribe(data => {
          this.user = data;
          if(this.user['login'] !== false) {return true;}
        });
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | boolean{
            if(this.isAuthenticated()) { // <- Сюда не проходит true
            return true;
            } else {
            this.router.navigate(['/login']);
            }

    }

}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ajax запрос по логину и паролю должен получить xml данные olegalimov AJAX и COMET 23 30.01.2018 15:00
Получить данные из формы введенные за все время Michel Элементы интерфейса 1 13.10.2017 19:14
JQuery Autocomplete Как получить данные, вводимые пользователем в поле? decadent42 jQuery 7 30.10.2015 21:55
Как правильно получить введенные данные в поле? buket jQuery 11 11.04.2010 19:59
Возможно ли получить данные из файла на сервере? sdff Общие вопросы Javascript 11 19.07.2008 20:48