Angular技术问题：如何在组件HTML中使用服务中的数据

先把你提供的服务代码做了Markdown格式化，方便阅读和后续修改：

import { Injectable } from '@angular/core';
import { PicItem } from './Models/Pictures';

@Injectable()
export class PicturesService {
  private readonly time = 10000;
  public image1:string = "";
  public image2:string = "";
  private _picList: string[];
  private index: number = 0;

  constructor() {
    this._picList = [ "", "" ]
    setInterval(() => {
      this.image1 = this.getImage();
      this.image2 = this.getImage();
    }, this.time);
  }

  // 推测你还没写完getImage方法，这里补个示例逻辑
  private getImage(): string {
    const currentImg = this._picList[this.index];
    this.index = (this.index + 1) % this._picList.length;
    return currentImg;
  }
}

结合Angular的最佳实践，给你几个使用和优化的小提示：

• 简化服务注册：Angular 6+版本里，建议给@Injectable添加providedIn: 'root'配置，这样不用在模块的providers数组里手动注册，就能自动成为全局单例服务：

  @Injectable({
    providedIn: 'root'
  })
  

• 避免构造函数里的长期任务：构造函数只适合做依赖注入，像setInterval这种定时任务，建议单独封装成初始化方法，同时一定要记得清理定时器防止内存泄漏：

  private intervalId: number;
  
  constructor() {
    this._picList = [ "", "" ];
    this.startImageRotation();
  }
  
  private startImageRotation(): void {
    this.intervalId = window.setInterval(() => {
      this.image1 = this.getImage();
      this.image2 = this.getImage();
    }, this.time);
  }
  
  // 提供销毁方法，在组件销毁时调用
  public stopRotation(): void {
    clearInterval(this.intervalId);
  }
  

• 让属性响应式更新：如果希望组件能自动感知image1和image2的变化，建议把这两个属性改成BehaviorSubject，组件可以通过订阅来获取实时更新：

  import { BehaviorSubject, Observable } from 'rxjs';
  
  // 私有Subject存储状态
  private readonly image1$ = new BehaviorSubject<string>("");
  private readonly image2$ = new BehaviorSubject<string>("");
  
  // 暴露可观察对象给组件，防止外部直接修改状态
  get image1$(): Observable<string> {
    return this.image1$.asObservable();
  }
  
  get image2$(): Observable<string> {
    return this.image2$.asObservable();
  }
  
  // 定时器里更新Subject的值
  private startImageRotation(): void {
    this.intervalId = window.setInterval(() => {
      this.image1$.next(this.getImage());
      this.image2$.next(this.getImage());
    }, this.time);
  }
  

  组件里使用时直接订阅即可：

  constructor(private picsService: PicturesService) {}
  
  ngOnInit(): void {
    this.picsService.image1$.subscribe(imgUrl => {
      // 处理图片1的更新逻辑
    });
  }
  

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