angular - Angular 新手，无法从组件外部访问变量

Question

好吧，让我尽可能地总结一下。我是 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);
    });

  }
}

token 正在通过 POST 握手从 API 返回。它以以下格式返回:

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

我正在将 token 记录到控制台，因此我知道它正在定义并接收它。

所以我的问题 我正在获取 token ，它被设置为 FinalToken，它被记录到控制台。问题是，由于某种原因，该变量对应用程序的任何其余部分都不可见

因此，如果我尝试从 ngOnInit(){} 包装器之外的任何地方调用它，它将返回未定义的状态。

例如，如果我想使用以下方法将其打印到 api.component.html 中的屏幕:

{{ FinalToken }}

在浏览器中，我得到:

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

没有错误，但它没有拉动变量

非常好:博士；是否可以使 const FinalToken 全局可用？我需要能够在对 API 的任何其他请求的 header 中提交它，但现在我什至无法在它所在组件的 HTML 中访问它

Answer 1

您并不真的想让它作为变量全局访问 - 将其保留在服务中并将其注入(inject)到您想要的位置(就像您已经在做的那样)。这将允许更好的数据封装。

要在组件 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 }} 不需要更改。