如何设置一个组件间可以访问的全局变量？

Question

这是项目结构的图片

在 login.component.html 中，我有代码通过用户从标准登录屏幕输入来获取用户名：

Login.component.html

      <form [formGroup]="loginForm" #ngForm="ngForm" (ngSubmit)="submitForm()" class="login-form">
        <mat-card-content>
          <p class="content">Username:<span>*</span></p>
          <input type="text" formControlName="userName" id="userName" autocomplete="off">
          <div class="form-group"  *ngIf="userError">
            <p class="alert1 alert-danger">
                <strong>Required: </strong>Username

在 login.component.ts 中跟进用户名，如下所示：

登录.component.ts

.....
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm, FormGroup, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { Location } from '@angular/common';



@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  @ViewChild('ngForm') ngForm: NgForm;

  loginForm = new FormGroup({
    userName: new FormControl(),
    userPass: new FormControl()
  });

  userError: boolean = false;
  passError: boolean = false;

  

  constructor(private router: Router, private location: Location) { }


  ngOnInit() {
    if (sessionStorage.length != 0) {
      this.location.replaceState('/tool');
      this.router.navigate(['/tool']);
    }
  }


  submitForm() {
    if ((this.loginForm.value.userPass == null && 
         this.loginForm.value.userName == null)) {
      this.userError = true;
      this.passError = true;
      setTimeout(() => {
        this.userError = false;
        this.passError = false;
      }, 4000);
......

我想做的是创建一个全局变量，允许我从 login.component.ts 访问用户名并在 buyback.component.ts 中与之交互。我想我需要在 submitForm 代码中的 login.component.ts 文件中为用户名创建一个全局变量，但我不知道如何做。

我如何编写一个全局变量，使我能够将用户输入的内容作为他们在 login.component.html 和 ts 文件中的用户名，并与 buyback.component.ts 中的数据以及其他变量（如 arbNumber、choice、buybackType）进行交互等（可以在下面的代码中查看..）

回购.component.ts

....

export class BuybackComponent implements OnInit {

  constructor(private _buybackService: BuybackService, private router: Router, private location: Location) { }
  arbNumber:String;
  arbNumber2:String;
  bType:String;
  optionValue:String;
  choice:String;
  buybackAmt:String;
  buybackTypeChoice:String

.....

Answer 1

在 Angular 中，你有一些方法可以共享全球事物。最佳做法是使用简单的服务。

ng g s shared-data

服务可以是这样的：

export class SharedService {
  private userData: { userName: string, role: string };

  public getUser() {
    return this.userData;
  }

  public setUser(userData: any) {
    this.userData = userData;
  }
}

在任何组件中你都可以这样做：

constructor(private sharedData: SharedData) {}

getUser() {
  this.sharedData.getUser(); // Here it is!
}

但是保存用户名、令牌、角色等数据的最佳方式可以是浏览器本地存储：

localStorage.set("user", JSON.stringify(userData)); // can be a simple string, too

let user = JSON.parse(localStorage.get("user"));