Новичок в angular, не могу понять, как получить доступ к переменным из-за пределов компонента

Хорошо, позвольте мне попытаться обобщить как можно лучше. Я новичок в Angular, довольно тщательно искал, но не могу найти ответ на свою проблему:

Сейчас у меня есть: Api.Service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';


const httpOptions = {
  headers: new HttpHeaders({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  })
};

@Injectable({ providedIn: 'root' })

export class TokenService {
  private tokenUrl = 'http://urlofapi/auth/token';

  constructor(private http: HttpClient) { }

  addToken(): Observable<any> {
    return this.http.post(this.tokenUrl, httpOptions);
  }

}

api.component.ts

import { Component, OnInit } from '@angular/core';
import { TokenService } from '../api.service';

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

export class ApiComponent implements OnInit {

  constructor(private tokenService: TokenService) { }

  ngOnInit() {
    this.tokenService.addToken().subscribe((data => {
      this.data = data;
      const finalToken = this.data['token'];

      console.log(finalToken);
    });

  }
}

Токен возвращается из API через рукопожатие POST. Он возвращается в формате:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVVUlEIjoiYTM3YWFmNzAtZjU0Yy00MGMwLWEwZGUtOTE4NTBkNjY1ODI2IiwiZGV2aWNlSWQiOiIxMjIzMzMiLCJleHBpcmVzQXQiOiIyMDE4LTExLTI5VDIwOjI4OjM3WiJ9.VcTt_TJWFA58iBCDS0JnTAJkH9EzU15QES9k0vI84Ic"
}

Я регистрирую токен на консоли, поэтому я знаю, что он определяет и получает его.

Итак, моя проблема Я получаю токен, он устанавливается как finalToken, он регистрируется в консоли. Проблема в том, что по какой-то причине эта переменная не видна ни в одном из остальных приложений.

поэтому, если я попытаюсь вызвать его из любого места за пределами оболочки ngOnInit() {}, он вернется как неопределенный.

For instance, if I want to print it to screen in my api.component.html by using:

{{ finalToken }}

in browser, I get:

<p _ngcontent-c1=""></p>

без ошибок, но не тянет переменную

Так что ОЧЕНЬ tl:dr; Можно ли сделать const finalToken доступным по всему миру? Мне нужно будет отправить его в заголовке любых дополнительных запросов к API, но сейчас я даже не могу получить к нему доступ в HTML компонента, в котором он находится.


angular angular7 angular-components angular6
person Daniel Stockbridge    schedule 30.11.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы действительно не хотите делать его глобально доступным как переменную - оставьте его в сервисе и внедрите туда, где хотите (как вы уже делаете). Это позволит улучшить инкапсуляцию данных в дальнейшем.

Чтобы сделать его доступным в компоненте html, вам нужно создать для него свойство public. Итак, вместо:

ngOnInit() {
    this.tokenService.addToken().subscribe((data => {
      this.data = data;
      const finalToken = this.data['token'];

      console.log(finalToken);
    });

  }

Сделай это:

public finalToken: string = null;
ngOnInit() {
    this.tokenService.addToken().subscribe((data => {
      this.data = data;
      this.finalToken = this.data['token'];

      console.log(finalToken);
    });

  }

Ваш html {{ finalToken }} не нужно менять.

person Zze    schedule 30.11.2018
comment
Ты жжешь!!! Я был полностью потерян на публичной части. Это сработало отлично. Спасибо! - person Daniel Stockbridge; 30.11.2018
comment
@DanielStockbridge Рад, что смог помочь, ты был чертовски близок. - person Zze; 30.11.2018
comment
К сожалению, чертовски близко к тому, что я слишком долго бился головой о стену. Корю себя за то, что не просто раньше открыл учетную запись с переполнением стека и не спросил - person Daniel Stockbridge; 30.11.2018