在多个组件中使用一个变量 Angular

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({ providedIn: "root" }) 将使该服务具有全局范围，因此任何组件都可以访问。我提供了一个示例组件，向您展示了如何使用该 authService 并获取计时器信息。

希望对您有所帮助！

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())

  }

}

在多个组件中使用一个变量 Angular

Use a variable in many components Angular

angular

typescript

angular-components