如何在Angular的TypeScript中动态设置当前时间变量及解决BehaviourSubject报错

报错原因排查 #

你遇到的Cannot read properties of undefined (reading 'next')报错，核心是BehaviorSubject只做了类型声明，没有初始化实例，调用next方法时变量本身是undefined，自然无法执行方法。
另外你当前的逻辑只调用一次时间获取方法，拿到的肯定是静态时间，需要加定时器定期触发时间更新，才能实现动态效果。

完整修改步骤 #

第一步：调整AppService服务代码 #

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

@Injectable({
  providedIn: 'root'
})
export class AppService {
  // 初始化BehaviorSubject，传入初始值
  private time = new BehaviorSubject<string>('');
  // 对外暴露只读的Observable，避免外部直接修改Subject
  public time$ = this.time.asObservable();

  constructor(private http:HttpClient) {
    // 启动定时器，每1秒更新一次时间，可根据需求调整间隔（比如按分钟更新就设为60000）
    interval(1000).subscribe(() => {
      this.updateTime();
    })
  }

  private updateTime() {
    const currentDate = new Date();
    const hours = currentDate.getHours();
    const minutes = currentDate.getMinutes();
    const seconds = currentDate.getSeconds();
    const timeStr = `${hours}:${minutes}:${seconds}`;
    this.time.next(timeStr);
  }

  // 封装获取问候语的方法，传入用户名即可返回对应内容
  getGreeting(userName: string): string {
    const hours = new Date().getHours();
    if (hours >= 4 && hours < 12) {
      return `Good morning ${userName}`;
    } else if (hours >= 12 && hours < 18) {
      return `Good afternoon ${userName}`;
    } else if (hours >= 18 && hours < 22) {
      return `Good evening ${userName}`;
    } else {
      return `Good night ${userName}`;
    }
  }
}

第二步：调整首页组件代码 #

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  currentTime: string = '';
  greeting: string = '';
  // 替换为实际的用户名
  userName = '测试用户';

  constructor(private appService: AppService) {}

  ngOnInit() {
    // 订阅时间流，实时更新时间
    this.appService.time$.subscribe(time => {
      this.currentTime = time;
      // 时间变化时同步更新问候语
      this.greeting = this.appService.getGreeting(this.userName);
    });
  }
}

第三步：组件模板中展示（可选） #

如果你需要在页面展示，直接在html文件中绑定对应变量即可：

<p>当前时间：{{ currentTime }}</p>
<p>{{ greeting }}</p>

额外说明 #

• 定时器间隔可以根据你的业务需求调整，如果不需要精确到秒，设置为60000（1分钟）更新一次即可，减少不必要的性能消耗
• BehaviorSubject的初始化必须传入初始值，这是rxjs的强制要求，避免空值异常

内容的提问来源于stack exchange，提问作者Viira