在许多组件中使用变量

Question

我有此功能可以获取用户身份验证的时间，并且如果输入的数据有效，则可以在登录按钮上运行。我想在应用程序的许多不同组件中使用“ this.time”来显示用户身份验证时间，但是我不知道该怎么做，因为“ this.time”的价值不是静态的，有人可以帮助您我吗？如何将该价值获取到其他组件？

  public sec = 0;
  public min = 0;
  public hour = 0;
  public time: string;      

startStopWatch() {
    this.time = "00:00:00";
    setInterval(() => {
      console.log(this.time)
      this.sec++;
      this.time = (this.hour + ':' + this.min + ':' + this.sec);
      if (this.sec === 60) {
        this.min++;
        this.sec = 0;
        if (this.min === 60) {
          this.hour++;
          this.min = 0;
        }
      }
    }, 1000);
  }

Answer 1

您可以通过服务使所有这些都可以访问，并且，由于看起来这与身份验证有关，因此您可以做一个不错的authservice。我提供了示例代码，该代码将提供您要寻找的功能。

在authservice中，@injectable（{suffenin：“ root”}）将使此服务具有全局范围，因此任何组件都可以访问。我提供了一个示例组件，向您展示了如何使用该授权服务并获取计时器信息。

希望这有帮助！

auth.service.ts

import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class AuthService {

  private isAuth: boolean;

  private sec = 0;
  private min = 0;
  private hour = 0;
  private time: string;      


  constructor() {}

  public login(){
    /* authentication logic here
    
    If authenticated, then this.startStopWatch()
    
    */
  }

  private startStopWatch() {
      this.time = "00:00:00";
      setInterval(() => {
        console.log(this.time)
        this.sec++;
        this.time = (this.hour + ':' + this.min + ':' + this.sec);
        if (this.sec === 60) {
          this.min++;
          this.sec = 0;
          if (this.min === 60) {
            this.hour++;
            this.min = 0;
          }
        }
      }, 1000);
    }

  public getTimer(){
    return this.time;
  }

}

示例组件

import { Component} from '@angular/core';

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

  constructor(private authService: AuthService) { }

  testFunction(){

    console.log(this.authService.getTimer())

  }

}